我有一个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;
}
当前回答
虽然上面的答案是正确的，但为了让新手更简单，你所需要做的就是设置左距和右距。下面的代码将提供宽度设置和位置是绝对的:
margin: 0 auto;
left: 0;
right: 0;
你也可以使用宽度的其他值，如max-content,fit-content等，如果你不想设置一个单位的值
演示:
.centeredBox { 保证金:0自动; 左:0; 右:0; /**位置为绝对*/ 位置:绝对的; 和框必须有一个宽度，任何宽度*/ 宽度:40%; 背景:# faebd7; ｝ <div class="centeredBox">居中框</div>
其他回答
这是一个链接，如果位置是绝对的，请使用这个使div在中心。
HTML:
<div class="bar"></div>
CSS:
.bar{
width:200px;
border-top:4px solid red;
position:absolute;
margin-left:auto;
margin-right:auto;
left:0;
right:0;
}
例子jsfiddle
虽然上面的答案是正确的，但为了让新手更简单，你所需要做的就是设置左距和右距。下面的代码将提供宽度设置和位置是绝对的:
margin: 0 auto;
left: 0;
right: 0;
你也可以使用宽度的其他值，如max-content,fit-content等，如果你不想设置一个单位的值
演示:
.centeredBox { 保证金:0自动; 左:0; 右:0; /**位置为绝对*/ 位置:绝对的; 和框必须有一个宽度，任何宽度*/ 宽度:40%; 背景:# faebd7; ｝ <div class="centeredBox">居中框</div>
.centerDiv {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
text-align:center;
}
这在IE8中不起作用，但可能是一个可以考虑的选项。如果您不想指定宽度，它主要是有用的。
.element
{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
你不能使用margin:auto;位置:绝对的;元素，只要删除它，如果你不需要它，但是，如果你需要，你可以使用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;
}
}
