Html 如何使用 CSS 将绝对 div 水平居中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17976995/
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 absolute div horizontally using CSS?
提问by CoreDo
I've a div and want it to be centered horizontally - although I'm giving it margin:0 auto;it's not centered...
我有一个 div 并希望它水平居中 - 虽然我给它margin:0 auto;它不是居中......
.container {
position: absolute;
top: 15px;
z-index: 2;
width:40%;
max-width: 960px;
min-width: 600px;
height: 60px;
overflow: hidden;
background: #fff;
margin:0 auto;
}
回答by thgaskell
You need to set left: 0and right: 0.
您需要设置left: 0和right: 0。
This specifies how far to offset the margin edges from the sides of the window.
这指定了从窗口侧面偏移边距边缘的距离。
Like 'top', but specifies how far a box's right margin edge is offset to the [left/right] of the [right/left] edge of the box's containing block.
与“top”类似，但指定框的右边距边缘与框的包含块的 [right/left] 边缘的 [left/right] 偏移多远。
Source:http://www.w3.org/TR/CSS2/visuren.html#position-props
来源：http : //www.w3.org/TR/CSS2/visuren.html#position-props
Note:The element must have a width smallerthan the window or else it will take up the entire width of the window.
If you could use media queries to specify a minimummargin, and then transition to
autofor larger screen sizes.
注意：元素的宽度必须小于窗口，否则它将占据窗口的整个宽度。
如果您可以使用媒体查询来指定最小边距，然后过渡到
auto更大的屏幕尺寸。
.container {
left:0;
right:0;
margin-left: auto;
margin-right: auto;
position: absolute;
width: 40%;
outline: 1px solid black;
background: white;
}<div class="container">
Donec ullamcorper nulla non metus auctor fringilla.
Maecenas faucibus mollis interdum.
Sed posuere consectetur est at lobortis.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Sed posuere consectetur est at lobortis.
</div>回答by Adel
This doesn't work in IE8 but might be an option to consider. It is primarily useful if you do not want to specify a width.
这在 IE8 中不起作用，但可能是一个可以考虑的选项。如果您不想指定宽度，它主要有用。
.element
{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
回答by Meta Pakistani
Although above answers are correct but to make it simple for newbies, all you need to do is set margin, left and right. following code will do it provided that width is setand positionis absolute:
虽然上面的答案是正确的，但为了让新手更简单，你需要做的就是设置边距，左边和右边。如果设置了宽度并且位置是绝对的，则以下代码将执行此操作：
margin: 0 auto;
left: 0;
right: 0;
Demo:
演示：
.centeredBox {
margin: 0 auto;
left: 0;
right: 0;
/** Position should be absolute */
position: absolute;
/** And box must have a width, any width */
width: 40%;
background: #faebd7;
}<div class="centeredBox">Centered Box</div>回答by Ronnie Royston
Flexbox? You can use flexbox.
弹性盒？您可以使用弹性盒。
.box {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
}
.box div {
border:1px solid grey;
flex: 0 1 auto;
align-self: auto;
background: grey;
}<div class="box">
<div class="A">I'm horizontally centered.</div>
</div>回答by Z. Rahman Raju
.centerDiv {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
text-align:center;
}
回答by Neko
so easy, only use margin and left, right properties:
如此简单，只需使用 margin 和 left, right 属性：
.elements {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
You can see more in this tip => How to set div element to center in html- Obinb blog
您可以在此提示中看到更多信息 =>如何在 html 中将 div 元素设置为居中-Obinb 博客
回答by Amit Kumar
Here is a link please use this to make the div in the center if position is absolute.
这是一个链接，如果位置是绝对的，请使用它在中心制作 div。
HTML:
HTML：
<div class="bar"></div>
CSS:
CSS：
.bar{
width:200px;
border-top:4px solid red;
position:absolute;
margin-left:auto;
margin-right:auto;
left:0;
right:0;
}
回答by Leonard Pauli
You can't use margin:auto;on position:absolute;elements, just remove it if you don't need it, however, if you do, you could use left:30%;((100%-40%)/2) and media queries for the max and min values:
你不能margin:auto;在position:absolute;元素上使用，如果你不需要它就删除它，但是，如果你这样做，你可以使用left:30%;((100%-40%)/2) 和媒体查询来获取最大值和最小值：
.container {
position: absolute;
top: 15px;
left: 30%;
z-index: 2;
width:40%;
height: 60px;
overflow: hidden;
background: #fff;
}
@media all and (min-width:960px) {
.container {
left: 50%;
margin-left:-480px;
width: 960px;
}
}
@media all and (max-width:600px) {
.container {
left: 50%;
margin-left:-300px;
width: 600px;
}
}
