如何中心绝对div水平使用CSS?

我有一个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;
}

当前回答

这是一个链接，如果位置是绝对的，请使用这个使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

2018-07-31 16:52:56

其他回答

两者的中心都是垂直和水平的使用左:50%,最高:50%;转换:翻译(-50%，-50%);

.centeredBox { 保证金:0自动; 左:50%; 上图:50%; /**位置为绝对*/ 位置:绝对的; 和框必须有一个宽度，任何宽度*/ 宽度:40%; 背景:# faebd7; text-align:中心; 填充:10 px; 转换:翻译(-50%，-50%); ｝ <div class="centeredBox">居中框</div>

2021-08-17 09:55:18

虽然上面的答案是正确的，但为了让新手更简单，你所需要做的就是设置左距和右距。下面的代码将提供宽度设置和位置是绝对的:

margin: 0 auto;
left: 0;
right: 0;

你也可以使用宽度的其他值，如max-content,fit-content等，如果你不想设置一个单位的值

演示:

.centeredBox { 保证金:0自动; 左:0; 右:0; /**位置为绝对*/ 位置:绝对的; 和框必须有一个宽度，任何宽度*/ 宽度:40%; 背景:# faebd7; ｝ <div class="centeredBox">居中框</div>

2016-02-05 07:14:03

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 >

2016-06-16 02:39:27

这在IE8中不起作用，但可能是一个可以考虑的选项。如果您不想指定宽度，它主要是有用的。

.element
{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

2014-11-19 19:42:42