CSS resolve text vertically centered

Reference Link: http://www.cnblogs.com/lufy/archive/2012/09/12/2681972.html http://zhidao.baidu.com/question/69214815.html

For the horizontal center of the text, the text-align:center can be solved, the vertical center is more complex, the classification of the discussion:

Single-line text, if there is only one line of text in a container, it is relatively simple to center it, we only need to set its actual height and the height of the row line-height equal . Such as:

div{

height:100px;

line-height:100px;

Overflow:hidden;

}

The code is simple, and the Overflow:hidden is used later to prevent the content from going out of the container or creating a wrap, so that the vertical center effect is not reached.

However, in Internet Explorer 6 and the following versions, this and the method do not support vertical centering of picture settings

If a piece of content, its height is variable, then we set Padding, so that the upper and lower Padding value is the same . Similarly, this is a "look" of the vertical center, it is only to make the text <div> completely fill a way only. You can use code similar to the following:

div {   
        padding:25px;   
        border:1px solid #FF0099;   
        Background-color: #FFCCFF;   
        width:760px;   
      }   

Three, multi-line text fixed height of the center

At the beginning of this article, we have said that the CSSvertical-alignproperty is only for the owningvalignThe (X) HTML tag of the attribute works, but there is one in the CSSDisplayproperty to simulate<table>, so we can use this property to let<div>Simulation<table>You can usevertical-alignThe Attentiondisplay:tableAndDisplay:table-cellUsed, the former must be set in theParent ElementThe latter must be set on thechild elements, so we need to add one more to the text that needs to be positioned<div>Elements: 

Div#wrap {
height:400px; 
 display:table;  
}   
div#content {
 Vertical-align:middle;  
 Display:table-cell;  
border:1px solid #FF0099; 
Background-color: #FFCCFF; 
width:760px; 
}

<div id= "Wrap" >   

    <div id= "Content" >

<pre> Now we want the text to be centered vertically! 
Div#wrap {
height:400px; 
display:table; 
        }    
div#content {
Vertical-align:middle; 
Display:table-cell; 
border:1px solid #FF0099; 
Background-color: #FFCCFF; 
width:760px; 
       }    
</pre>
</div>
</div>
The above method IE8 and below are not supported, the following is a perfect solution to the compatibility problem:

. 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 ie8,ie7,ie6--><!--[if LTE IE 8]><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 a three div:
The outer layer (outer) can define the height and width as needed, but display must be table.
The middle tier (middle) can have a specific CSS style, for example: Margin-left, but display must be table-cell,vertical-align for middle.
The inner layer (inner) is mainly used to deal with IE6 and IE7 Ie8 ().
With the css,html code above, you can write this:

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

CSS resolution text is centered vertically