Five methods of DIV+CSS vertical Center

Method One: The display of some div is set to a table, so we can use the Vertical-align property of the table.

The structure effect is as follows:
Css

The
code is as follows:


Div#wrapper {


display:table;


width:500px;


height:500px;


Background-color: #c00;


}


Div#row {


Display:table-row;


}


Div#cell {


Display:table-cell;


Vertical-align:middle;


}

Html

The
code is as follows:


<div id= "wrapper" >


<div id= "Row" >


<div id= "cell" >


If you are want to sell sugar water for the rest of our life or want a chance to change the world


</div>


</div>


</div>

Advantages: Do not be limited by the content height, simple to achieve vertical center;
Disadvantage: Incompatible ie6,7

Method Two: This method uses a div that is absolutely positioned, setting its top to 50%,margin-top to a negative content height. This means that the object must specify a fixed height in the CSS.
The structure effect is as follows:

Css

The
code is as follows:


Div#wrapper {


position:relative;


width:500px;


height:500px;


Background-color: #c00;


}


div#content {


Position:absolute;


top:50%;


left:0;


width:400px;


height:300px;


margin-top: -150px;


Background-color:pink;


}

Html

The
code is as follows:


<div id= "wrapper" >


<div id= "Content" >





</div>


</div>

Advantages: Good compatibility
Disadvantage: You must know the height of the content box can be, with this limit;

Method Three: The principle of this method and method two is the same. No more nonsense to look at the code.

Css

The
code is as follows:


. Wrap {


height:500px;


width:500px;


Background-color:pink;


}


. Additional {


height:50%;


Margin-bottom: -120px;


}


#content {


height:240px;


width:70%;


Background-color: #000;


}

Html

The
code is as follows:


<div class= "wrap" >


<div class= "additional" ></div>


<div id= "Content" >


</div>


</div>

The advantages and disadvantages of the same as the second, the shortcomings of the additional tag;

Method Four: This method uses a Position:absolute, with a fixed width and height of the div. This div is set to top:0; bottom:0;. But because it has a fixed height, actually can not and up and down both spacing is 0, so margin:auto; will make it center. Using Margin:auto; it is easy to center the block-level elements vertically.
The structure effect is as follows:

Css

The
code is as follows:


#content {


Position:absolute;


top:0;


bottom:0;


left:0;


right:0;


Margin:auto;


height:240px;


width:70%;


Background-color: #000;


}

Html

The
code is as follows:


<div id= "Content" >


Content here</div>

Advantages: Very simple
Disadvantage: Incompatible ie6,7

Method Five: This method can only be placed in single-line text. Simply set the line-height to the height value of that object to make the text centered. This is not the case, you can see you understand;