如何垂直对齐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> 垂直居中在CSS中
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
文章摘要：
对于CSS2浏览器，可以使用display:table / display:table-cell来居中显示内容。
JSFiddle也提供样例：
<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>
有可能将旧浏览器（IE6 / 7）的黑客手段合并到使用#样式中，以隐藏较新浏览器的样式：
<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>
您需要添加line-height属性，并且该属性必须与div的高度相匹配。 在你的情况下：
height: 309px;
line-height: 309px;
实际上，你可能完全删除height属性。
这只适用于一行文本 ，所以要小心。
更新 - 这是一个很好的资源
http://howtocenterincss.com/
以CSS为中心是一件痛苦的事情。 似乎有一个巨大的方法来做到这一点，取决于各种因素。 这将它们合并在一起，并为您提供每种情况所需的代码。
更新 - 使用Flexbox
为了保持这篇文章与最新的技术保持同步，这里有一个使用flexbox集中某些东西的简单方法。 Flexbox在IE9 and lower不受支持。
这里有一些很好的资源：
带有浏览器前缀的jsfiddle
HTML
<ul>
<li>
<p>Some Text</p>
</li>
<li>
<p>A bit more text that goes on 2 lines</p>
</li>
<li>
<p>Even more text that demonstrates how lines can span multiple lines</p>
</li>
</ul>
CSS
li {
display: flex;
justify-content:center;
align-content:center;
flex-direction:column; /* column | row */
}
更新 - 另一个解决方案
这是来自zerosixthree并让你用css的6行中心任何东西
此方法在IE8 and lower不受支持
的jsfiddle
HTML
<ul>
<li>
<p>Some Text</p>
</li>
<li>
<p>A bit more text that goes on 2 lines</p>
</li>
<li>
<p>Even more text that demonstrates how lines can span multiple lines</p>
</li>
</ul>
CSS
p {
text-align: center;
position: relative;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
先前的回答
简单和跨浏览器的方法，作为标记答案中的链接很有用，但稍显过时。
如何在无序列表和div中垂直和水平居中文本，而无需使用JavaScript或css行高 。 无论你有多少文本，你都不需要将特殊类应用于特定的列表或div（代码每个都相同）。 这适用于所有主流浏览器，包括IE9，IE8，IE7，IE6，Firefox，Chrome，Opera和Safari。 有两种特殊的样式表（1个用于IE7，另一个用于IE6）由于现代浏览器没有的css限制而帮助他们。
安迪霍华德 - 如何垂直和水平居中文本在一个无序列表或div
编辑：由于我对最后一个项目的IE7 / 6并不在意，所以我使用了一个稍微精简的版本（即删除了在IE7和6中工作的东西）。 可能对其他人有用......
的jsfiddle
HTML
<ul>
<li>
<div class="outerContainer">
<div class="innerContainer">
<div class="element">
<p><!-- Content --></p>
</div>
</div>
</div>
</li>
<li>
<div class="outerContainer">
<div class="innerContainer">
<div class="element">
<p><!-- Content --></p>
</div>
</div>
</div>
</li>
</ul>
和CSS：
.outerContainer {
display: table;
width: 100px; /* width of parent */
height: 100px; /* height of parent */
overflow: hidden;
}
.outerContainer .innerContainer {
display: table-cell;
vertical-align: middle;
width: 100%;
margin: 0 auto;
text-align: center;
}
li {
background: #ddd;
width: 100px;
height: 100px;
}