元素垂直居中方法总结

最新推荐文章于 2025-09-07 21:17:08 发布

转载最新推荐文章于 2025-09-07 21:17:08 发布 · 53 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/webLilingyun/p/5552149.html

文章标签：

#前端 #ViewUI

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

首先，基本的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你看着办。

转载于:https://www.cnblogs.com/webLilingyun/p/5552149.html