CSS 如何在div中将绝对定位的元素居中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1776915/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to center absolutely positioned element in div?
提问by Ish
I need to place a div(with position:absolute;) element in the center of my window. But I am having problems doing so, because the width is unknown.
我需要在窗口中央放置一个div(with position:absolute;) 元素。但是我这样做时遇到了问题，因为宽度是 unknown。
I tried this. But it needs to be adjusted as the width is responsive.
我试过这个。但它需要调整，因为宽度是响应式的。
.center {
left: 50%;
bottom:5px;
}
Any ideas?
有任何想法吗？
回答by Matthias Weiler
This works for me:
这对我有用：
#content {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 100px; /* Need a specific value to work */
}<body>
<div>
<div id="content">
I'm the content
</div>
</div>
</body>回答by bobince
<body>
<div style="position: absolute; left: 50%;">
<div style="position: relative; left: -50%; border: dotted red 1px;">
I am some centered shrink-to-fit content! <br />
tum te tum
</div>
</div>
</body>回答by ProblemsOfSumit
Responsive Solution
响应式解决方案
Here is a good solution for responsive design or unknown dimensionsin general if you don't need to support IE8 and lower.
这里是一个很好的解决方案为响应式设计或未知的尺寸一般，如果你不需要支持IE8和降低。
.centered-axis-x {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}
.outer {
position: relative; /* or absolute */
/* unnecessary styling properties */
margin: 5%;
width: 80%;
height: 500px;
border: 1px solid red;
}
.inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* unnecessary styling properties */
max-width: 50%;
text-align: center;
border: 1px solid blue;
}<div class="outer">
<div class="inner">I'm always centered<br/>doesn't matter how much text, height or width i have.<br/>The dimensions or my parent are irrelevant as well</div>
</div>The clue is, that left: 50%is relative to the parent while the translatetransform is relative to the elements width/height.
线索是，这left: 50%是相对于父级的，而translate变换是相对于元素宽度/高度的。
This way you have a perfectly centered element, with a flexible width on both child and parent. Bonus: this works even if the child is bigger than the parent.
这样你就有了一个完美居中的元素，在子元素和父元素上都有一个灵活的宽度。奖励：即使孩子比父母大，这也有效。
You can also center it vertically with this (and again, width and height of parent and child can be totally flexible (and/or unknown)):
你也可以用这个垂直居中（同样，父母和孩子的宽度和高度可以完全灵活（和/或未知））：
.centered-axis-xy {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
Keep in mind that you might need transformvendor prefixed as well. For example -webkit-transform: translate(-50%,-50%);
请记住，您可能还需要transform供应商前缀。例如-webkit-transform: translate(-50%,-50%);
回答by pratikabu
Really nice post.. Just wanted to add if someone wants to do it with single div tag then here the way out:
真的很好的帖子..只是想补充一下，如果有人想用单个 div 标签来做，那么这里的出路：
Taking widthas 900px.
以width作为900px。
#styleName {
position: absolute;
left: 50%;
width: 900px;
margin-left: -450px;
}
In this case one should know the widthbeforehand.
在这种情况下，应该width事先知道。
回答by Ijas Ameenudeen
Absolute Centre
绝对中心
HTML :
HTML :
<div class="parent">
<div class="child">
<!-- content -->
</div>
</div>
CSS :
CSS :
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
Demo:http://jsbin.com/rexuk/2/
演示：http : //jsbin.com/rexuk/2/
Tested in Google Chrome, Firefox, and IE8
在 Google Chrome、Firefox 和 IE8 中测试
Hope this helps :)
希望这可以帮助 ：）
回答by Mohsen Abdollahi
this work for vertical and horizontal
这项工作适用于垂直和水平
#myContent{
position: absolute;
left: 0;
right: 0;
top:0;
bottom:0;
margin: auto;
}
and if you want make element center of parent, set position of parent relative
如果你想让元素成为父元素的中心，请设置父元素的相对位置
#parentElement{
position:relative
}
edit:
编辑：
for vertical center align set height to your element. thanks to @Raul
if you want make element center of parent, set position of parent to relative
对于垂直中心对齐设置高度到您的元素。感谢@Raul
如果要使元素成为父元素中心，请将父元素的位置设置为相对
回答by cavila
Searching for an solution I got answers above and could make content centered with Matthias Weiler answer but using text-align.
寻找解决方案我得到了上面的答案，并且可以使内容以 Matthias Weiler 的答案为中心，但使用文本对齐。
#content{
position:absolute;
left:0;
right:0;
text-align: center;
}
Worked with chrome and Firefox.
使用 chrome 和 Firefox。
回答by michal.jakubeczy
If you need to center horizontally and vertically too:
如果您也需要水平和垂直居中：
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
回答by Crashalot
This is a mix of other answers, which worked for us:
这是其他答案的组合，对我们有用：
.el {
position: absolute;
top: 50%;
margin: auto;
transform: translate(-50%, -50%);
}
回答by RealMJDev
** RESPONSIVE SOLUTION**
**响应式解决方案**
Assuming the element in the div, is another div...
假设div中的元素，是另一个div...
this solution works fine
这个解决方案工作正常
<div class="container">
<div class="center"></div>
</div>
the containercan be any size(must be position relative)
该容器可以是任何大小（必须是相对位置）
.container {
position: relative;/*important*/
width: 200px;/*any width*/
height: 200px;/*any height*/
background: red;
}
The element(div) can also be any size(must be smaller than container)
元素（div）也可以是任意大小（必须小于容器）
.center {
position: absolute;/*important*/
top: 50%;/*position Y halfway in*/
left: 50%;/*position X halfway in*/
transform: translate(-50%,-50%);/*move it halfway back(x,y)*/
width: 100px;/*any width*/
height: 100px;/*any height*/
background: blue;
}
The result will look like this. Run the code snippet
结果看起来像这样。运行代码片段
.container {
position: relative;
width: 200px;
height: 200px;
background: red;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100px;
height: 100px;
background: blue;
}<div class="container">
<div class="center"></div>
</div>I found it very helpfull
我发现它很有帮助
