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

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

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

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

我怎样才能做到这一点？

当前回答

HTML

<div id='parent'>
  <div id='centered-child'></div>
</div>

CSS

#parent {
  position: relative;
}
#centered-child {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto auto;
}

http://jsfiddle.net/f51rptfy/

其他回答

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

HTML格式：

<div id="intro_img">

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

</div>

CSS:

#intro_img {
    text-align: center;
}

在寻找解决方案时，我得到了前面的答案，可以将内容以Matthias Weiler的答案为中心，但使用文本对齐：

#content{
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
}

它与谷歌Chrome和Firefox配合使用。

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

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

#内容｛margin:0自动；显示：表格；float:none；｝<body>＜div＞<div id=“content”>我是内容</div></div></body>

HTML格式：

<div id='parent'>
  <div id='child'></div>
</div>

CSS:

#parent {
  display: table;
}
#child {
  display: table-cell;
  vertical-align: middle;
}

我知道我已经给出了答案，我之前的答案和其他人的答案都很好。但我在过去使用过这个，它在某些浏览器和某些情况下效果更好。所以我想我也会给出这个答案。我没有“编辑”我之前的答案并添加它，因为我觉得这是一个完全独立的答案，我提供的两个答案并不相关。

推荐文章