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

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

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

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

我怎样才能做到这一点？

当前回答

由于我不想更改容器/包装器元素的样式，所以这些解决方案都不适合我。这段代码对我有用：

position: absolute;
left: 50%;
margin-left: -50px;
top: 50%;
margin-top: -50px;

其他回答

尽量不要使用CSS的阴暗面。避免使用负值作为边距。我知道有时候你会被迫做一些糟糕的事情，比如左边距：-450px，但你可能会做一些右边距：450px。这只是我的工作方式。

这是对我们有用的其他答案的混合：

.el {
   position: absolute;
   top: 50%;
   margin: auto;
   transform: translate(-50%, -50%);
}

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

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

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

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

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

由于我不想更改容器/包装器元素的样式，所以这些解决方案都不适合我。这段代码对我有用：

position: absolute;
left: 50%;
margin-left: -50px;
top: 50%;
margin-top: -50px;

推荐文章