html - 如何在div中垂直对齐文本？(How do I vertically align text in a div?)

Question

I am trying to find the most effective way to align text with a div.

(我试图找到最有效的方法来将文本与div对齐。)

I have tried a few things and none seem to work.

(我尝试了几件事，但似乎都没有用。)

 .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> 

  ask by shinjuo translate from so

Answer 1

Vertical Centering in CSS

(CSS的垂直居中)
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

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

Article summary:

(文章摘要：)

For a CSS 2 browser, one can use display:table / display:table-cell to center content.

(对于CSS 2浏览器，可以使用display:table / display:table-cell来居中显示内容。)

A sample is also available at JSFiddle :

(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> 

It is possible to merge hacks for old browsers (Internet Explorer 6/7) into styles with using # to hide styles from newer browsers:

(可以使用#将旧浏览器（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>