"Organize" how to align elements horizontally vertically

The first type: The known element is wide, high

Compatible: ie6+

Source:

<title>css to center the element vertically </title><style type= "Text/css" >.box{width:200px;Height:200px;Background-color:Grey;/*CSS Centers the elements vertically*/position:relative;}. Box. Center{width:100px;Height:100px;Background-color:#B5C8E8;/*CSS Centers the elements vertically*/position:Absolute; Left:50%;Top:50%;Margin-left:-50px;Margin-top:-50px;}</style><div class= "box" > <div class= "center" ></div></div>

Demo

The second type: element width, high unknown

Compatible: ie8+

Source:

<title>css to center the element vertically </title><style type= "Text/css" >.box{width:200px;Height:200px;Background-color:Grey;/*CSS Centers the elements vertically*/Display:Table;}. Box. Center{width:100px;text-align:Center;Background-color:#B5C8E8;/*CSS Centers the elements vertically*/Display:Table-cell;vertical-align:Middle; }</style><div class= "box" > <div class= "center" > I want to center </div></div>

Demo

To be compatible with IE6/7, you need to add a div, this method is clever, using the left, top percent value is relative to the width of the parent element of this feature

<title>css to center the element vertically </title><style type= "Text/css" >.box{width:200px;Height:200px;Background-color:Grey;/*CSS Centers the elements vertically*/Display:Table;/*compatible with IE6, 7*/*position:relative;}. Table-cell{/*CSS Centers the elements vertically*/Display:Table-cell;vertical-align:Middle;/*compatible with IE6, 7*/*position:Absolute;*left:50%;*top:50%;}. Box. Center{width:100px;text-align:Center;Background-color:#B5C8E8;/*CSS Centers the elements vertically*/Display:Table-cell;vertical-align:Middle;/*compatible with IE6, 7*/*position:relative;*left:-50%;*top:-50%;}</style><div class= "box" > <div class= "Table-cell" > <div class= "center" > Please view this dem under IE6/7 O</div> </div></div>

Demo

Third: The known element is wide, high, need to use a div to open up the above space

Compatible: ie6+

Source:

<title>css to center the element vertically </title><style type= "Text/css" >.box{width:200px;Height:200px;Background-color:Grey;/*CSS Centers the elements vertically*/}. Box. Center{width:100px;Height:100px;Background-color:#B5C8E8;margin:0 Auto;text-align:Center;/*CSS Centers the elements vertically*/}. box. Floater{Height:50%;/*set the bottom margin to be half the height of the element to be centered*/Margin-bottom:-50px;}</style><div class= "box" > <div class= "Floater" ></div> <div class= "center" ></di V></div>

Demo

The fourth type: element width, high unknown, need to use the height of another element to achieve the center, take advantage of the vertical-align:middle characteristics.

Compatible: ie6+

Source:

<title>css to center the element vertically </title><style type= "Text/css" >.box{width:200px;Height:200px;Background-color:Grey;text-align:Center;/*CSS Centers the elements vertically*/}. Box. Center{Background-color:#B5C8E8;/*CSS Centers the elements vertically*/Display:Inline-block;vertical-align:Middle;/*compatible with IE6, 7*/*display:inline;*zoom:1;}. box. Reference{Display:Inline-block;vertical-align:Middle;Height:100%;/*compatible with IE6, 7*/*display:inline;*zoom:1;}</style><div class= "box" > <div class= "Reference" ></div> <div class= "center" > I want to center & Lt;/div></div>

Demo

The fifth type: element width, high unknown, set the parent element relative positioning, the element is absolutely positioned, Margin:auto, and the distance from four directions is 0; This method causes the element to fill its parent element.

Compatible: ie8+

Source:

<title>css to center the element vertically </title><style type= "Text/css" >.box{width:200px;Height:200px;Background-color:Grey;text-align:Center;/*CSS Centers the elements vertically*/position:relative;}. Box. Center{width:100px;Height:100px;Background-color:#B5C8E8;/*CSS Centers the elements vertically*/position:Absolute; Left:0;Top:0; Right:0;Bottom:0;margin:Auto;}</style><div class= "box" > <div class= "center" ></div></div> 

Demo

The sixth type: element width, high unknown, using the translate within the percentage is relative to the element itself, the width of the property.

Compatible: ie9+

Source:

<title>css to center the element vertically </title><style type= "Text/css" >.box{width:200px;Height:200px;Background-color:Grey;text-align:Center;/*CSS Centers the elements vertically*/}. Box. Center{Background-color:#B5C8E8;/*CSS Centers the elements vertically*/position:relative; Left:50%;Top:50%;/*the percentage within the translate is relative to the width of the element itself*/Transform:Translate ( -50%, -50%);}</style><div class= "box" > <div class= "center" > I want to center </div></div>

Demo

Note: In the above methods, all the additional elements used can be substituted by pseudo-elements without considering IE6, 7.

"Organize" how to align elements horizontally vertically