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

---

可能是如何在div中居中绝对定位的元素？的重复问题。 - LoganMzz

@LoganMzz 这并不是因为这个问题的宽度已知。 - Davbog

@Davbog 不完全准确。我们只知道一个最小值和一个最大值，但实际宽度在任何时候都是未知的。 - undefined

Answer 1

你需要设置 left: 0 和 right: 0。

这指定了边距边缘与窗口边缘的偏移距离。

类似于“top”，但指定一个盒子的右侧边距边缘相对于盒子包含块的左/右边缘偏移的距离。

来源：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

---

注意：**width** 是必须的！ - Ijas Ameenudeen

没错。使用 "text-align: center;" 和 "left: 0; right: 0;" 可以让你绝对定位一个 div 并保持水平居中。 - Sterling Bourne

@AlexG，我刚在IE11中加载了这个小工具，它可以正常运行。你能否澄清一下？ - Brian Webster

@AlexG，它在IE11中确实可以工作，但是如果您不声明宽度，它将无法工作。我曾经遇到过同样的问题。您必须像示例中所示使用宽度。 - Panama Jack

在我们的情况下，还需要使用“margin: auto”才能使其正常工作。 - Crashalot

Answer 2

这在IE8中不起作用，但可能是要考虑的选项。它主要适用于您不想指定宽度的情况。

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

- Adel

---

这可能取决于他项目的要求。 - Kris Selbekk

目前为止，在Safari浏览器中仍需要一个带有-webkit-前缀的规则才能使其正常工作。 - Shikkediel

不幸的是，它以某种方式将周围div的透明度也应用于内部文本。 - dnl.re

这绝对是答案。对我来说，特定设置宽度是绝对不可接受的。 - Mike

完全同意 @Mike - Sampgun

非常有用！如果您不想指定宽度，这将非常有用。 - Basj

Answer 3

尽管以上答案是正确的，但为了使新手更容易理解，你只需要设置margin、left和right。下面的代码将会实现它，前提是width已经设置且position是绝对定位：

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

如果您不想使用带单位的值来设置宽度，您还可以使用其他值，例如max-content、fit-content等。

演示：

.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>

- Metabolic

---

这对于Bootstrap列中的绝对定位图像完美有效。 - ZachNag

Answer 4

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

- Z. Rahman Raju

---

这个解决方案似乎在所有浏览器上都不起作用。 - Sara Kat

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>

- Ronnie Royston

---

这对我的特殊情况非常有效。left: 0; right: 0; 扩展到了100%，但由于子元素有背景色，这不是一个选项。而 left: 50%; transform: translateY(-50%); 不起作用，因为它将子元素限制在50%的宽度。这是唯一保留子元素灵活尺寸的解决方案（仅受浏览器支持的限制）。谢谢！ - Ben Dyer

问题指定了绝对定位。 - David Spector

position: absolute 和 justify-content: center 在 display: flex 中会有什么不同的显示效果呢？ - Ronnie Royston

@DavidSpector 这对我来说很有效，使用绝对定位。我只需要添加 width: 100% - undefined

Answer 6

很简单，只需使用margin和left、right属性：

.elements {
 position: absolute;
 margin-left: auto;
 margin-right: auto;
 left: 0;
 right: 0;
}

您可以在这个提示中了解更多信息 => 如何在HTML中将div元素设置为居中-Obinb博客

- Neko

---

我认为这会将div拉伸以适应视口。你试过吗？ - David Spector

Answer 7

这是一个链接，请使用它将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

- Amit Kumar

Answer 8

垂直和水平居中都可以使用 left:50%;top:50%; transform: translate(-50%, -50%);

.centeredBox {
    margin: 0 auto;
    left: 50%;
    top:50%;
   
   
   /** Position should be absolute */
    position: absolute;
    /** And box must have a width, any width */
    width: 40%;
    background: #faebd7;
    text-align: center;
    padding:10px;
    transform: translate(-50%, -50%);
   
   }

<div class="centeredBox">Centered Box</div>

- Priya Maheshwari

Answer 9

在 position:absolute; 元素上不能使用 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;
    }

}

- Leonard Pauli