如何垂直对齐 div 中的文本？

Question

我正在尝试找到将文本与 div 对齐的最有效方法。我尝试了一些东西，但似乎都不起作用。

 .testimonialText {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 150px;
  height: 309px;
  vertical-align: middle;
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  padding: 1em 0 1em 0;
}

 <div class="testimonialText">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

原文由 shinjuo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在现代浏览器中执行此操作的正确方法是使用 Flexbox。

有关详细信息，请参阅 此答案。

请参阅下面的一些在旧版浏览器中工作的旧方法。

---

CSS 中的垂直居中

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

文章摘要：

对于 CSS 2 浏览器，可以使用 display:table / display:table-cell 将内容居中。

JSFiddle 也提供了一个示例：

 div { border:1px solid green;}

 <div style="display: table; height: 400px; overflow: hidden;">
  <div style="display: table-cell; vertical-align: middle;">
    <div>
      everything is vertically centered in modern IE8+ and others.
    </div>
  </div>
</div>

可以使用 # 将旧浏览器（Internet Explorer 6/7）的 hack 合并到样式中，以隐藏新浏览器的样式：

 div { border:1px solid green;}

 <div style="display: table; height: 400px; #position: relative; overflow: hidden;">
  <div style=
    "#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
    <div style=" #position: relative; #top: -50%">
      everything is vertically centered
    </div>
  </div>
</div>

原文由 Robert Harvey 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您需要添加 line-height 属性，并且该属性必须与 div 的高度匹配。在你的情况下：

 .center {
  height: 309px;
  line-height: 309px; /* same as height! */
}

 <div class="center">
  A single line.
</div>

事实上，您可能会完全删除 height 属性。

不过这只适用于 一行文本，所以要小心。

原文由 David 发布，翻译遵循 CC BY-SA 4.0 许可协议