我有一个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;
}
当前回答
Flexbox吗?你可以使用flexbox。
.box { 显示:-ms-flexbox; 显示:-webkit-flex; 显示:flex; -webkit-justify-content:中心; justify-content:中心; ｝ .box div { 边框:1px纯灰色; Flex: 0 1自动; align-self:汽车; 背景:灰色; ｝ < div class = "盒子" > <div class="A">I'm horizontal居中 < / div >
其他回答
你不能使用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;
}
}
.centerDiv {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
text-align:center;
}
很简单，只使用margin和left, right属性:
.elements {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
你可以在这个技巧中看到更多=>如何在html- Obinb博客中设置div元素居中
Flexbox吗?你可以使用flexbox。
.box { 显示:-ms-flexbox; 显示:-webkit-flex; 显示:flex; -webkit-justify-content:中心; justify-content:中心; ｝ .box div { 边框:1px纯灰色; Flex: 0 1自动; align-self:汽车; 背景:灰色; ｝ < div class = "盒子" > <div class="A">I'm horizontal居中 < / div >
虽然上面的答案是正确的，但为了让新手更简单，你所需要做的就是设置左距和右距。下面的代码将提供宽度设置和位置是绝对的:
margin: 0 auto;
left: 0;
right: 0;
你也可以使用宽度的其他值，如max-content,fit-content等，如果你不想设置一个单位的值
演示:
.centeredBox { 保证金:0自动; 左:0; 右:0; /**位置为绝对*/ 位置:绝对的; 和框必须有一个宽度，任何宽度*/ 宽度:40%; 背景:# faebd7; ｝ <div class="centeredBox">居中框</div>
