如何使用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和right: 0。

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

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

来源：http://www.w3.org/TR/CSS2/visuren.html#position-道具

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

您可以使用媒体查询来指定最小边距，然后转换到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>

Answer 2

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

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

Answer 3

虽然上面的答案是正确的，但为了让新手更简单，你所需要做的就是设置左右边距。如果设置了宽度并且位置是绝对的，则以下代码将执行此操作：

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>

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>

Answer 6

如此简单，只使用边距和左右属性：

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

您可以在这个技巧中看到更多=>如何在html-Obinb博客中将div元素设置为中心

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

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>

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;
    }
}