Several ways to achieve vertical centering on the mobile side

Vertical centering is one of the most common effects in layout, 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% ; :  50% ;  background :  #000 ;  overflow :  auto ;  margin :  auto ;  position :  absolute ;  top :  0 ;  left :  0 ;  bottom :  0 ;   right :  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 is really ingenious ... By: After to occupy a bit.

Methods 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}

。。。。。。。

Transferred from: http://www.th7.cn/web/html-css/201504/98912.shtml

Several ways to achieve vertical centering on the mobile side