Summary of element vertical centering method

The following summarizes some common vertical centering methods for elements:

First, the basic HTML and CSS are

#wrap {  width:320px;  height:160px;  background:red;} #wrap >div{  width:50px;  height:50px;  Background:black;  Color: #fff;} <div id= "wrap" >  <div class= "V-center" > I am the front dog </div></div>

Method:

/* Scenario One: Absolute positioning negative margin50% method *//* #wrap {position:relative;}  *//*.v-center{Position:absolute;  top:50%;  left:50%;  Margin-left: -25px; Margin-top: -25px;}  *//* Solution: Using Calc to support unit operation, fatal disadvantage UC This 2 goods belch fart, domestic mobile end don't think of *//*.v-center{position:absolute;  Top:calc (50%-25px); Left:calc (50%-25px);} *//* Plan repeatedly optimized: use translate * Note transform need to add WebKit UC QQ comes with browser on this phone perfect support * advantage is not need to know the center element of the high width!!!  * Here translate 50% is the height of their 50%, and margin is the father's width as the benchmark * *//*.v-center{Position:absolute;  top:50%;  left:50%; -webkit-transform:translate ( -50%,-50%);} */* Scenario two: Out of absolute positioning, using viewport units * Because VH is a viewport unit, the viewport is the screen viewable area, that is, this approach is always centered on the screen * The pop-up to consider this approach, and UC still does not support * Well, this method when I didn't say * *//*.v-center{m  ARGIN:50VH Auto 0; -webkit-transform:translatey (-50%);} *//* Scenario Three: Table-cell * Please do not discriminate against Table,table-cell in this demo the support is perfect * But wrap can't use margin at this time, just like every drug has a side effect.  *//* #wrap {Display:table-cell;  Vertical-align:middle; Text-align:center;}. v-center{Display:inline-block;} *//* scenario Four: Using floating elements * support is perfect * disadvantage is still need to know the height of the element, and hack taste very strong *//* #wrap:: before{contenT: ';  Float:left;   height:50%; margin-bottom:-25px;}.   v-center{Clear:both; Margin:auto;}   *//* Scenario Five: Flex *UC does not support * */#wrap {display:-webkit-box;          Display:-webkit-flex; Display:flex;}. v-center{Margin:auto;}

Finally, there is good news, QQ browser X5 is about to exit the historical stage is replaced by CHROME37, UC you look at the office.

Summary of element vertical centering method