6 ways to center CSS elements vertically

The use of CSS for the horizontal center of elements, relatively simple, row-level elements set its parent element of the Text-align Center, block-level elements set its own left and right margins for auto. This paper collects six methods of vertical centering of elements using CSS, each of which is suitable for different situations and chooses a certain method in the actual use process.

Line-height Method

650) this.width=650; "src=" Http://www.vanseodesign.com/blog/wp-content/uploads/2011/07/line-height.png "alt=" line Height Demo "height=" 231 "width=" 465 "style=" border:none; "/>
Trial: Single-line text vertically centered, demo

Code:

Html

123	<div id= "Parent" ><div id= "Child" >text here</div></div>

Css

123	#child {line-height:200px;}

Center a picture vertically, the code is as follows

Html

123	<div id= "Parent" ></div>

As1

123456

#parent {line-height:200px;} #parent img {vertical-align:middle;}

CSS Table Method

650) this.width=650; "src=" Http://www.vanseodesign.com/blog/wp-content/uploads/2011/07/table-cell.png "alt=" table Cell Demo "height=" 233 "width=" 465 "style=" border:none; "/>

Applicable: General, demo

Code:

Html

123	<div id= "Parent" ><div id= "Child" >content here</div></div>

Css

12345

#parent {display:table;} #child {display:table-cell;vertical-align:middle;}

Low version of IE fix bug:

123	#child {display:inline-block;}

Absolute positioning and negative Margin

650) this.width=650; "Src=" Http://www.vanseodesign.com/blog/wp-content/uploads/2011/07/positioning-margin.png " alt= "absolute positioning and negative margin demo" style= "Border:none;"/>

For: block-level elements, demo

Code:

Html

123	<div id= "Parent" ><div id= "Child" >content here</div></div>

Css

123456789

#parent {position:relative;} #child {position:absolute;top:50%;left:50%;height:30%;width:50%;margin:-15% 0 0-25%;}

Absolute Positioning and stretching

650) this.width=650; "Src=" Http://www.vanseodesign.com/blog/wp-content/uploads/2011/07/positioning-stretch.png " alt= "absolute positioning and vertical stretching demo" style= "Border:none;"/>

Applicable: general, but does not work correctly when IE version is less than 7, demo

Code:

Html

123	<div id= "Parent" ><div id= "Child" >content here</div></div>

As1

1234567891011

#parent {position:relative;} #child {Position:absolute;top:0;bottom:0;left:0;right:0;width:50%;height:30%;margin:auto;}

Equal Top and Bottom Padding

650) this.width=650; "src=" Http://www.vanseodesign.com/blog/wp-content/uploads/2011/07/padding.png "alt=" vertical Centering with padding demo "style=" Border:none; "/>

Applicable: General, demo

Code:

Html

123	<div id= "Parent" ><div id= "Child" >content here</div></div>

Css

123456

#parent {padding:5% 0;} #child {padding:10% 0;}

Floater Div

650) this.width=650; "src=" Http://www.vanseodesign.com/blog/wp-content/uploads/2011/07/floater-div.png "alt=" Vertical centering with Floater div demo "style=" Border:none; "/>

Applicable: General, demo

Code:

Html

1234	<div id= "Parent" ><div id= "floater" ></div><div id= "Child" >content Here</div></div >

As1

1234567891011

#parent {height:250px;} #floater {float:left;height:50%;width:100%;margin-bottom: -50px;} #child {clear:both;height:100px;}

The above is six kinds of methods, can be used in the actual process of reasonable choice, reference to the article "Vertical-centering".

This article is from the "Liu Bofang blog" blog, make sure to keep this source http://liubofang.blog.51cto.com/11162557/1868233

6 ways to center CSS elements vertically