我正在尝试找到将文本与 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>
在现代浏览器中执行此操作的正确方法是使用 Flexbox。
See 这个答案了解详情。
请参阅下文，了解在旧版浏览器中运行的一些旧方法。
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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
