如何使用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。

这指定了从窗口侧面偏移边缘边缘的距离。

类似于“ top”，但指定框的右边距边缘与框的包含块的[right / left]边缘的[left / right]偏移多远。

资料来源： http : //www.w3.org/TR/CSS2/visuren.html#position-props

注意：元素的宽度必须小于窗口的宽度，否则它将占用窗口的整个宽度。

如果可以使用媒体查询来指定最小边距，然后过渡到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>

这在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>

Flexbox？您可以使用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>

.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元素设置为居中

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

}