如何使用CSS水平居中绝对div？
我有一个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;
}
你需要设置left:0; right:0; left:0; right:0; 。
这指定距离窗口边缘的距离边缘有多远。
http://www.w3.org/TR/CSS2/visuren.html#position-props
http://jsfiddle.net/SS6DK/
CSS
.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;
left: 0;
right: 0;
}
注意：您必须定义width或此答案不起作用 。 这意味着这个答案对于动态宽度的元素没有用处。
这在IE8中不起作用，但可能是一个可以考虑的选项。 如果你不想指定宽度，它主要是有用的。
.element
{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
虽然上面的答案是正确的，但为了让新手变得简单，所有你需要做的就是设置保证金，左和右。 下面的代码将会这样做，只要宽度被设置并且位置是绝对的：
margin: 0 auto;
left: 0;
right: 0;
演示：
.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>