CSS for vertical centering

In order to achieve good compatibility, the method of vertical centering of PC side is generally through absolute positioning, Table-cell, negative margin and so on. With the CSS3, the vertical centering on the mobile side is more diversified.

Method 1:Table-cell

HTML structure:

<class= "box box1">          <span> Center vertically </span>  </div>  

Css:

. Box1 {       display: Table-cell;        vertical-align: Middle;        text-align: center;           }   

Method 2:Display:flex

. Box2 {       display: flex;        justify-content:Center;        align-items:Center;   }  

Method 3: absolute positioning and negative margins

. Box3{position:relative;}. Box3 span{position:Absolute;width:100px;Height:50px;Top:50%; Left:50%;Margin-left:-50px;Margin-top:-25px;text-align:Center; }

Method 4: absolute positioning and 0

 .box4 span  { width :  50% ;  height :  50% ;  background :  #000 ;  overflow :  auto ;  margin :  auto ;  position :  absolute ;  top :  0 ;  left :  0 ;  Bottombottom :  0 ;     Rightright :  0 ; }   

This approach is somewhat similar to the above, but this is done by Margin:auto and Top,left,right,bottom, which are set to 0, which is amazing. But here we have to determine the height of the inner element, which can be used as a percentage and more suitable for the mobile side.

Method 5:Translate

. box6 span {               position: absolute;                top:50%;                Left:50%;                width:100%;                Transform:translate ( -50%,-50%);                Text-align: center;           }  

This is actually a variant of Method 3, and the shift is achieved through translate.

Method 6:display:inline-block

. box7{text-align:Center;font-size:0; }. box7 span{vertical-align:Middle;Display:Inline-block;font-size:16px; }. Box7:after{content:"';width:0;Height:100%;Display:Inline-block;vertical-align:Middle; }

This method compares 6 ... By: After to occupy a bit.

Method 7: Display:flex and Margin:auto

. Box8 {       display: flex;        text-align: center;   }    . box8 span{    margin: auto;}

Method 8:Display:-webkit-box

. Box9 {       display: -webkit-box;        -webkit-box-pack:Center;        -webkit-box-align:Center;        -webkit-box-orient: vertical;        text-align: Center  }   

CSS3 Broad and profound, can achieve a lot of creative effect, need to study carefully.

Today I learned a way to make up the following:

Method 9:Display:-webkit-box

This method inserts a div outside of the content element. Set this div height:50%; Margin-bottom:-contentheight;.

The content clears the float and appears in the middle.

<class= "Floater"></div>     <  class = "content" > </div >        

{       float:left;         height:50%;         margin-bottom:-120px;   } {clear:both;                    Height:240px;         position:relative;   }   

Advantages:
Applies to all browsers
Content is not truncated when there is not enough space (for example: Window Zoom out), scroll bar appears

Disadvantages:
The only thing I can think of is the need for extra empty elements (and not so bad, another topic)

The above is the whole content of this article, I hope that everyone's study has helped.

Original: http://www.cnblogs.com/hutuzhu/p/4450850.html

CSS is centered vertically