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. 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"> Sample text 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

Use this code to vertically align text in a div: 

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's possible to merge hacks for old browser (IE6/7) into styles with using # to hide styles from newer browsers like this:

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>

For Vertical Centering in CSS refer to this link http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

For CSS2 browser one you can use display:table/display:table-cell to center content.