Several methods of vertical center of CSS

1. Horizontal Vertical center of picture

HTML:<Divclass= "Parent">        <Divclass= "Child">           <imgsrc= "Xxx/demo.png">        </Div>      </Div>css:. parent{display:table}. Parent. child {Display:table-cell;        *display:inline-block;        Text-align:center;     Vertical-align:middle;        }. Parent. Child img{Border:none;        width:200px;        height:200px;     Vertical-align:middle; }

Note: IE FIX: *display:inline-block; Because the Vertical-align property is used with tables, we set the parent div to display:table and set the child div to cell Display:talbe-cell. and then I We can safely use Vertical-align:middle to vertical the contents of the cell. This method is suitable for multi-line text, the container div grows dynamically with the content, unfortunately does not work in IE6, IE7.

2. Absolute positioning and vertical stretching

HTML:<Divclass= "Parent">        <Divclass= "Child">Content here</Div>     </Div>CSS:. parent {position:relative;         }. Parent. child {Position:absolute;         top:0;         right:0;         bottom:0;         left:0;         Margin:auto;         width:50%;      height:50%; }

Note: The child div is in the parent Div, its top, bottom, left, and right values are set to 0. This positioning is not possible because the height and width of the child div are set to less than the height and width of the parent div. Setting the 4 border of the Sub div to auto produces equal margins at the top and bottom and left and right, which causes the sub div to be horizontally and vertically centered, unfortunately IE7 not supported below.

3. Filling

 html:  <  div  class  = "parent"  >  <  div  class  = "Child"  >  content here </ div     >  </ div  >     CSS:. Parent {padding:5% 0;    }. Parent. Child {padding:10% 0; }

Note: The same top and bottom padding is used to center the child Div in the parent Div and to center the text in the child Div. The padding is set to "%", allowing two div to grow dynamically. If absolute measurements are set on the height of any element, some mathematical knowledge is required to ensure that the top and bottom fills are the same. Although this method is set paddings on the container, you can flip things and set the margins in the contained elements.

4.lineHeight

HTML:    <  class= "parent">     <class= "Child"  >content here</div>   </Div  >CSS:   . Child {        line-height:200px;    }

Note: Vertical centering is achieved by giving the Sub Div (the one that contains the text) a higher row height than the font size. Some also set a height equal to the row height on this div, but I haven't found it necessary. This will work vertically to center a line of text, but will not work on multiple lines of text.

5. Positioning and negative margins

 html:  <  div  class  = "parent"  >  <  div  class  = "Child"  ></ div  >  </ div  >  css:. parent{position:relativ      e}. Parent. child {Position:absolute;      top:50%;      left:50%;      width:200px;      height:200px;     Margin: -100px 0 0-100px; }

Note: The child div is positioned in the parent Div Center by positioning and margin, by setting the top and left values of the sub div to 50%, and the upper left corner of the child Div in the center of the parent div. The negative top and left are equal to half the height and width of the element, and the child div is stretched upward so that it is in the parent Div Center. This method is best for block-level elements, and it needs to know the dimensions of the child Div.

6. Floating partitions

HTML:<Divclass= "Parent">       <Divclass= "Floater"></Div>; <Divclass= "Child">Content here</Div>     </Div>css:. parent{height:200px;         }. Parent. floater {float:left;         height:50%;         width:100%;         MARGIN-BOOTM: -50px;      border:1px solid red;        }. Parent. child {Clear:both;        height:100px;      OUTLINE:1PX solid yellow; }

Note: Here, an empty div is set to half the height of the parent div and floats to the left (or right). We want the center div to be cleared, so its top edge is directly below the bottom of the floating div. To make the vertical center of the Sub div upward, we add a negative bottom margin to the floating div, which is equal to half the height of the sub div.

Reprinted from: http://frontenddev.org/article/introduction-to-vertical-in-the-css-in-several-ways.html

Several methods of vertical center of CSS