如何使用 CSS 转换为 vertically-center 两个重叠元素？

Question

我有一个 relatively-positioned div 包装器，我想 vertically-align 一个 div 在里面。 Stack 的各种其他答案似乎表明这是执行此操作的正确方法：

.vcenter {position: relative; top: 50%; transform: translateY(-50%); }

效果很好，但仅适用于单个 child 元素。我想要两个重叠的 child divs，一张图片和一些文本，两者都 vertically-centered 在包装器 div:

中

<div class="wrap">
  <div class="foo vcenter"></div>
  <div class="bar vcenter"></div>
</div>

这不起作用 - 转换适用于两个 children，但第二个 child 垂直偏移第一个 child 的高度。

我做了一个简单的 jsfiddle 可以使这个更清楚。

有没有办法让两个元素都到达每个中心，就好像它们是唯一的 child？

(PS - 不要告诉我用一个包含文本和图像作为背景的 div 替换它们，它们需要彼此独立移动)

Answer 1

您应该使用绝对位置而不是相对位置：

.vcenter {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
}

Updated plunkr

Answer 2

既然你想让内部元素重叠，最好的办法就是绝对定位，因为它会把元素从正常流中带出来。

然后，要居中，可以使用绝对居中技巧：

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;

.wrap {height: 100px; width: 200px; border: solid red 1px; position: relative; }
.foocenter {position: absolute; top: 20px; left: 30px; }
.barcenter {position: absolute; top: 10px; left: 40px; }

.foo {height: 60px; width: 140px; background: blue; z-index: -5; opacity: .5; }
.bar {height: 80px; width: 120px; background: yellow; z-index: -6; }

.hcenter.vcenter {
  position: absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin: auto;
}

I want to do get this effect:
<div class="wrap">
  <div class="foo foocenter"></div>
  <div class="bar barcenter"></div>
</div>
<br>
One child:
<div class="wrap">
  <div class="foo vcenter hcenter"></div>
</div>
<br>
Two children:
<div class="wrap">
  <div class="foo vcenter hcenter"></div>
  <div class="bar vcenter hcenter"></div>
</div>

如何使用 CSS 转换为 vertically-center 两个重叠元素？

How can I use a CSS transform to vertically-center two overlapping elements?

css

css-position