具有绝对位置的中心 div 仅使用 css 而不知道宽度答案

【问题标题】：center div with position absolute with just css without knowing the width具有绝对位置的中心 div 仅使用 css 而不知道宽度
【发布时间】：2014-05-05 23:00:41
【问题描述】：

我想根据用户点击的方式将显示和隐藏的不同图像居中。我为图像居中所做的是：

img { 
  margin-left: auto; 
  margin-right: auto; 
  display: block;
}

效果很好。但它不适用于position: absolute; 是否有一种 css 方法可以在不知道width 的情况下将position: absolute div 水平居中在body 或parent 的中间？

【问题讨论】：

将text-align: center;添加到其容器中，并使容器位置为绝对位置而不是图像。

标签： html css

【解决方案1】：

对于绝对定位的元素，您可以将margin:auto 与left:0 和right:0（用于水平居中）或top:0 和bottom:0（用于垂直居中）组合设置：

img {
  position:absolute;
  left:0;
  right:0;
  margin:auto;
}

Demo.

【讨论】：

它可以多么简单。非常感谢！
@supersize 不客气，是的，它很简单，但看起来它并不比使用 translateX(-50%) 的解决方案更受欢迎/知名，这也有效。
不知道为什么这个解决方案没有被宣传，如果您考虑浏览器支持，translate 解决方案并不是那么好。
@Andrei 完全正确。我认为这是最好和最简单的解决方案。我也不知道。
@Andrei 是的，虽然旧的浏览器（不支持转换）很快就会消失。

【解决方案2】：

给元素position: absolute 并将其定位在距屏幕边缘left 50% 的位置，然后使用transform: translate 将其向左移动宽度的50%。 p>

演示：

HTML：

<div class="center"></div>

CSS：

.center {
  position: absolute;
  top: 0;
  left: 50%;
  
  transform: translateX(-50%);
}

Here's a pen 这个。

Here's the browser support 用于 2d 转换，以及有关您需要哪些供应商前缀的信息。

您还可以使用transform: translate3d 以相同的逻辑垂直居中元素。 CSS 将如下所示：

.center {
  position: absolute;
  top: 50%;
  left: 50%;  
  transform: translate3d(-50%, -50%, 0);
}

【讨论】：

【解决方案3】：

我知道的唯一方法是使用额外的 div，如下所示：

http://jsfiddle.net/tTAG5/1/

HTML：

<div class="target">
<div class="wrapper"></div>
</div>

CSS：

.wrapper{
    width:100px;
    height:100px;
    background:blue;
    margin:0 auto;
    margin-left:-50%;
}
.target{
    position:absolute;
    left:50%;
}

这是做什么的：

在你的主div上设置left:50%
将您的divs 内容添加到另一个包装器 div 元素中，如上面的演示所示
在包装器上设置margin-left:-50% div

【讨论】：

【解决方案4】：

你可以使用：

padding-left: 50%;
margin-left: -(half the width of your image)px

这不是最干净的解决方案，它可能不是绝对定位的正确方案。

【讨论】：

他不知道宽度
这是一个很好的场景，但前提是您知道元素的width。正如我的 OP 所说，我想要它而不知道宽度。
是的，在不知道宽度的情况下，这不是一个好方案。你能在 OP 中发布你的问题吗？