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

原文由 CoreDo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您需要设置 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>

原文由 thgaskell 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

原文由 Adel 发布，翻译遵循 CC BY-SA 3.0 许可协议