Vertical center of CSS multi-line text

. Outer {display: Table; width: 578px; overflow: hidden; Background: # Eee; Height: 42px ;}. middle {display: Table-cell; Vertical-align: middle; margin-left 10px;}/* the following CSS is for IE7, IE6 */<! --[If lte ie 7]> <style>. outer {position: relative ;}. middle {position: absolute; top: 50% ;}. inner {position: relative; top:-50%} </style> <! [Endif]-->
 

The above is the style !~

Here we need to define three Div:
The outer layer (outer) can define the height and width as needed, but the display must be a table.
The middle layer (middle) can have specific CSS styles, such as: margin-left, but the display must be table-cell, and the vertical-align must be middle.
The inner layer is mainly used to deal with IE6 and IE7 (Note: IE8 supports table-cell center, so no hack is required ).
With the above CSS, htmlCodeThis can be written as follows:

 <  Div Class  = "Outer"  >    <  Div  Class  = "Middle"  >      <  Div  Class  = "Inner"  >  Put the text you want to center here. This is the second line...  </  Div  >   </  Div  >  </  Div  >