如何使用CSS水平居中绝对div？

Question

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

Answer 1

你需要设置left: 0.

这指定了从窗口边缘偏移边缘边缘的距离.

http://www.w3.org/TR/CSS2/visuren.html#position-props

http://jsfiddle.net/SS6DK/

CSS

.container {
  left:0;
  right:0;

  margin-left: auto;
  margin-right: auto;

  position: absolute;
  width: 40%;

  outline: 1px solid black;
  background: white;
}

注意:您必须定义right: 0或此答案不起作用.这意味着这个答案对于具有动态宽度的元素没有用.

Answer 2

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

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

Answer 3

虽然上面的答案是正确的,但为了使新手简单,你需要做的就是设置左右边距.如果设置了width并且position是绝对的,则以下代码将执行此操作:

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>

Answer 4

.centerDiv {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align:center;
}

Answer 5

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>