-webkit-background-clip：文本和垂直居中的文本

Question

我希望在具有背景图像的整页元素中垂直居中一个元素，其中包含背景裁剪文本。使用 -webkit-background-clip: text 和相应的 IE 回退对于剪辑效果很好，但每次我尝试使用 display: inline-block 或 position: absolute 将框居中时，文本立即消失。

body {
  margin: 1rem;
}

.box {
  height: calc(100vh - 2rem);
  border: 1px solid;
  background-image: url(http://lorempixel.com/1280/720/);
  -webkit-background-clip: text;
}

.align {
  /* to right-align the text box */
  text-align: right;
  
  /* uncomment below to see the issue */
  /* display: inline-block; */
}

.title {
  /* Duplicated here for Safari */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: yellow;
  
  margin: 0;
  font: bold 6rem/1 sans-serif;
  text-transform: uppercase;
  text-align: center;
}

<article class="box">
  <div class="align">
    <h1 class="title">The Title</h1>
</article>

我创建了 a Codepen with an example。例如，如果您在 .align class 上取消注释 display: inline-block 或尝试使用 position: absolute 和 transform 将其垂直居中，文本将消失。

我确信我遗漏了一些简单的东西，非常感谢任何建议！

Answer 1

看起来这确实是一个已知问题，并在 Chrome 63 中得到解决！

-webkit-background-clip：文本和垂直居中的文本

-webkit-background-clip: text and vertically centred text

css

vertical-alignment