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

Question

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

我试图找到最有效的方法来将文本与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>

Answer 1

我使用以下内容轻松地垂直居中随机元素：HTML：<div&nbsp;style="height:&nbsp;200px"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;id="mytext">This&nbsp;is&nbsp;vertically&nbsp;aligned&nbsp;text&nbsp;within&nbsp;a&nbsp;div</div></div>CSS：#mytext&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;relative; &nbsp;&nbsp;&nbsp;&nbsp;top:&nbsp;50%;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;transform:&nbsp;translateY(-50%); &nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform:&nbsp;translateY(-50%);}这使我的文本div居中于200px高的外部的精确垂直中间div。请注意，您可能需要使用浏览器前缀（就像-webkit-我的情况一样）才能使其适用于您的浏览器。这不仅适用于文本，也适用于其他元素。