CSS Vertical centering Guide

Roughly sort the vertical centering problem in CSS

Mainly divided into two major categories

1 know the size of the block element, generally refers to know the height of the element.

Method One: The simplest, the analogy horizontal center.

Idea: The child element is set to absolute; Top bottom are set to 0; Margin:auto;

<Divclass= "Lev1">I'm the first floor .<Divclass= "Lev2">I'm on the second floor .</Div>    </Div>/*css*/. lev1{width:200px;            height:200px;            Background-color: #008BCD;            border:1px solid #1874CD;        position:relative;            }. lev2{Background-color: #C078CD;            border:1px solid #B800CD;            width:100px;            height:100px;            Position:absolute;            top:0;            bottom:0;        Margin:auto; }

Method Two: The same set sub-element absolute positioning, let its margin-top:-height/2; top:50%;

Idea: The same is absolute positioning, understanding negative margin is the main point. Two more words negative margin set to negative value will make the actual height of the element is shorter, the map to the HTML generally appear to be pulled upward (margin-top2 negative) or other elements to pull up (margin-bottom negative). Specific can refer to this blog http://www.51xuediannao.com/html+css/htmlcssjq/css-margin.html

Finally say two words: if do not know the child element height can Transform:translatey (-50%); is not very witty!!!

<Divclass= "Lev3 lev">I'm the first floor .<Divclass= "Lev4">I am the first (absolute margin:-height/2;top:50%)</Div></Div>/css/. lev3{width:200px;            height:200px;            Background-color: #008BCD;            border:1px solid #1874CD;        position:relative;            }. lev4{Background-color: #C078CD;            border:1px solid #B800CD;            width:100px;            height:100px;            Position:absolute;            top:50%;        Margin-top: -50px; }

Method Three: Add an extra sub-div, so that its height is equal to 50%, and then set its MARGIN-BOTTOM:-HEIGHT/2; the equivalent of a sub-div pulling content up so much

Idea: Understanding negative margin is the key. Important floater the property to set (why float to set float and clear?) Setting its height to 50% is relative to the parent element; MARGIN-TOP:-HEIGHT/2 is equivalent to pulling up so many distances from the handle element)

<DivID= "Parent"><DivID= "Floater"></Div><DivID= "Child">Content here</Div></Div>/*css*/#parent {height:250px;} #floater {float:left;height:50%;width:100%;margin-bottom: -50px;} #child {clear:both;height:100px;}

Method Four: The parent element is set to table, and the child element is set to Table-cell vertical-alight:middle;

Idea: The advantage of changing layout properties is that it can lay out unknown height elements. By the way, review the vertical-align properties, this ghost, it seems to be very complicated, remember the simplest, only the inline and Inline-block properties valid

Portal Vertical-align Specific Understanding http://www.zhangxinxu.com/wordpress/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84 %e4%b8%80%e4%ba%9b%e7%90%86%e8%a7%a3%e4%b8%8e%e8%ae%a4%e8%af%86%ef%bc%88%e4%b8%80%ef%bc%89/

Div id= "parent" > <  id= ' child '>Content here</div></  div>/*css/#parent {display:table;} #child {display:table-cell;vertical-align:middle;}

Method Five: Also black technology, with the Wraith elements open

Specific methods:

<Divclass= "Ghost-center">  <P>I ' m vertically centered multiple lines of text in a container. Centered with a ghost pseudo element</P></Div>/*css/body {background: #f06d06; font-size:80%;}  div {background:white;  width:240px;  height:200px;  margin:20px;  Color:white;  resize:vertical;  Overflow:auto; padding:20px;}. Ghost-center {position:relative;}.  Ghost-center::before {content: "";  Display:inline-block;  height:100%;  width:1%; Vertical-align:middle;}.  Ghost-center p {display:inline-block;  Vertical-align:middle;  width:190px;  margin:0;  padding:20px; Background:black;}

There are, of course, several other things not mentioned, such as the flex layout, which is simple and padding:10p 0; Line-heights=height;

CSS Vertical centering Guide