垂直对齐此文本我缺少什么？ [复制]答案

【问题标题】：What am I missing to vertically align this text? [duplicate]垂直对齐此文本我缺少什么？ [复制]
【发布时间】：2018-02-15 05:40:24
【问题描述】：

我可以将line-height 设置为85px，它会垂直对齐它，但我并不总是知道元素有多高。我确定我在这里遗漏了一些简单的东西......但是我可以在 .content 类中修改什么以使文本垂直居中？

.tile {
  position: relative;
  width: 100px;
  height: 85px;
  display: inline-block;
  border: 1px solid red;
}
#container1 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#container2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.content {
  margin: auto;
  height: 100%;
  vertical-align: middle;
  text-align: center;
}

<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile">
<div id="container1">
  <div id="container2">
    <div class="content">Test</div>
  </div>
</div>
</div>

【问题讨论】：

Flexbox 一个选项？

标签： html css vertical-alignment centering

【解决方案1】：

您可以像这样使用psuedo 元素：

.content:after {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

请看下面的演示：

.tile {
  position: relative;
  width: 100px;
  height: 85px;
  display: inline-block;
  border: 1px solid red;
}
#container1 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#container2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.content {
  margin: auto;
  height: 100%;
  vertical-align: middle;
  text-align: center;
}
.content:after {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile">
<div id="container1">
  <div id="container2">
    <div class="content">Test</div>
  </div>
</div>
</div>

【讨论】：

这很完美，你能解释一下它为什么/如何工作吗？
处理 inline 元素时垂直居中的 hacks 之一...
对我来说已经足够好了！ :)