元素垂直居中方法总结

以下总结了一些常见的元素垂直居中方法：

首先，基本的html和CSS为

#wrap{
  width: 320px;
  height: 160px;
  background: red;
}
#wrap>div{
  width: 50px;
  height: 50px;
  background: black;
  color: #fff;
}

<div id="wrap">
  <div class="v-center">我是前端狗</div>
</div>
　　

方法：

/*方案一：绝对定位负margin50%方法*/
/*#wrap{position: relative;}*/
/*.v-center{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -25px;
  margin-top: -25px;
}*/

/*方案一 优化版:利用calc支持单位运算，致命缺点UC这2货嗝屁了，国内移动端别想了*/
/*.v-center{
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 25px);
}*/

/*方案一 再优化版：利用translate
 * 注意transform需要加上webkit  UC QQ 自带浏览器在本手机上完美支持
 * 优点是不需要知道居中元素的高宽！！！
 * 这里translate的50%就是自己高宽的50%，而margin是以父亲的宽度为基准
 * */
/*.v-center{
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
}*/

 /*方案二： 脱离绝对定位，利用视口单位
 * 因为vh是视口单位，视口就是屏幕可视区域，也就是说，这种办法永远在屏幕居中
 * 居中弹层才考虑这种办法，并且UC还是不支持
 * 好吧，这种方法当我没说
 * */
/*.v-center{
  margin: 50vh auto 0;
  -webkit-transform: translateY(-50%);
}*/

/*方案三： table-cell
 * 请不要歧视table，table-cell在这个demo中支持度完美
 * 但是wrap此时不能使用margin了，就像每一种药都多少有点副作用一样。。
 */
/*#wrap{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.v-center{
 display: inline-block;

}*/

/*方案四： 利用浮动元素
 * 支持度完美
 * 缺点是还是需要知道元素高度，以及hack味道很浓
 */
/*#wrap::before{
  content: ‘‘;
  float: left;
  height:50%;
  margin-bottom:-25px;
}
.v-center{
  clear:both;
  margin: auto;
}*/

/*方案五： flex
 *UC不支持
 * */
#wrap{
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
.v-center{
  margin: auto;
}

　　最后有个好消息，QQ浏览器的X5即将退出历史舞台被chrome37替换，UC你看着办。