Question

我想将显示和隐藏的不同图像居中，具体取决于用户点击的方式。我对图像居中所做的是：

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

工作得很好。但它不适用于position: absolute;是否有一种css唯一的方法可以在position: absolute或body中间水平居中parent div而不知道width }？

Answer 1

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

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

Demo.

Answer 2

给予元素position: absolute并将其从屏幕的left边缘定位50％，然后使用transform: translate将其移动其宽度的50％在左边。

演示：

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

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

这是做什么的：

在您的主left:50%

div

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

div

Answer 4

您可以使用：

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

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

中心div与位置绝对只有css而不知道宽度

4 个答案:

Demo.

演示：