Question

我试图将两段文本直接叠加在一起以创建分层效果，同时还尝试将它们垂直居中于父级。为了垂直居中，我正在使用如in this post概述的ghost伪元素，我发现这是在高度可变的父级居中时最可靠的方法。

正如您在下面的小提琴中看到的那样，.bg-text元素是垂直居中的，但.text-wrapper元素被强制位于父元素下方，所以看起来这种垂直居中的方法不允许更多比一个中心元素？

＆＃13;

figure {
  position: relative;
  overflow: hidden;
  float: left;
  width: 100%;
  height: 200px;
  background: red;
}
figure::before {
  content: "[BEFORE]";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}
/* Background text */

.bg-text {
  display: inline-block;
  vertical-align: middle;
  width: 80%;
  color: green;
  text-align: center;
}
/* Text */

.text-wrapper {
  display: inline-block;
  vertical-align: middle;
  width: 80%;
  text-align: center;
  color: blue;
}

＆＃13;

<figure>
  <div class="bg-text">BACKGROUND TEXT</div>
  <div class="text-wrapper">
    <h3>Overlay This</h3>
    <h4>And this!</h4>
  </div>
</figure>

＆＃13;

FIDDLE

Answer 1

Flexbox和绝对定位可以做到这一点：

＆＃13;

* {
  margin: 0;
  padding: 0;
}
figure {
  position: relative;
  height: 200px;
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
/* Background text */

.bg-text {
  width: 80%;
  color: green;
  text-align: center;
}
/* Text */

.text-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 255, 0, 0.25);
  width: 80%;
  text-align: center;
  color: blue;
}

＆＃13;

<figure>
  <div class="bg-text">BACKGROUND</div>
  <div class="text-wrapper">
    <h3>Overlay This</h3>
    <h4>And this!</h4>
  </div>
</figure>

＆＃13;

Answer 2

垂直对齐：中间在table-celll中工作，因为你不放。以你的风格使用它可以帮助你

.bg-text {
    color: green;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 80%;
}

.text-wrapper {
    color: blue;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 80%;
}
figure {
    background: red none repeat scroll 0 0;
    float: left;
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
}

叠加2个文本元素，同时垂直居中

2 个答案: