如何在div中居中放置绝对定位的元素？

我想在窗口的中心放置一个div（with position:absolute；）元素。但我在这样做时遇到了问题，因为宽度未知。

我尝试了以下CSS代码，但它需要调整，因为宽度是响应的。

.center {
  left: 50%;
  bottom: 5px;
}

我怎样才能做到这一点？

当前回答

您可以将图像放置在一个div中，添加一个div id，并让该div的CSS具有文本align:center:

HTML格式：

<div id="intro_img">

    <img src="???" alt="???">

</div>

CSS:

#intro_img {
    text-align: center;
}

其他回答

如果需要水平和垂直居中：

left: 50%;
top: 50%;
transform: translate(-50%, -50%);

我首选的定心方法：

position: absolute;
margin: auto;
width: x%

绝对块元素定位保证金自动左/右、上/下相同

一个JSFiddle在这里。

我只是想补充一句，如果有人想用一个div标记来完成，那么这里是解决方法：

宽度为900px。

#styleName {
    position: absolute;
    left: 50%;
    width: 900px;
    margin-left: -450px;
}

在这种情况下，应该事先知道宽度。

Sass/Compass版本的先前响应解决方案：

#content {
  position: absolute;
  left: 50%;
  top: 50%;
  @include vendor(transform, translate(-50%, -50%));
}

可以使用calc（）将纵横比为1的元素与位置绝对值居中

在下面的示例中，我使用了一个圆，因为它更容易解释和理解，但相同的概念可以应用于任何具有纵横比的形状：1表示宽度和高度相等。（关于纵横比）

：根目录{--直径：80px；}第二部分{位置：绝对；顶部：计算（50%-var（--直径）/2）；右：计算（50%-var（--直径）/2）；纵横比：1；width:var（--直径）；边界半径：100%；背景：蓝色；}＜div/＞

解释

推荐文章