背景：在项目中经常碰到让元素垂直居中的情形，实现的方法有很多，各有利弊。众所周知的，用flex布局很容易就实现，but，一些不是很主流的浏览器并不支持flex，这就比较尴尬了，有好东西不能在项目中用起来。今天就利用下业余时间，汇总一下常用的几种垂直居中的方式。

如图，如果想让盒子A在盒子B内垂直居中

    
  
     
      A
     
    

1. flex方式，兼容到ie10

   .box {    display: -webkit-flex;  /* 新版本语法: chrome 21+ */    display: flex;          /* 新版本语法: opera 12.1, firefox 22+ */         /*flex-direction: row; // 默认水平排列 */    align-items: center; /* 元素排列的垂直方向居中 */}

2. 利用ifc(行内格式化上下文)，其实就是利用行高撑高父元素，视觉上表现也为垂直居中。

   .box {  line-height: 100px; }.item {  display: inline;}

3. 绝对相对定位

   .box {  position: relative;}.item {  position: absolute;  top: 50%;  margin-top: -10px; // 自身高度的一半，此用法需要知道自身的高度  // transform: translateY(-50%); // 兼容性允许的话可以用css3特性代替margin-top}// 绝对定位另一种方式.item {  position: absolute;  top: 0;  bottom: 0;  margin: auto;  // left: 0; right: 0; // 这样还能水平居中}

4. 利用vertical-align,为了不产生新的dom，可能使用伪类before做辅助，让子元素与伪类垂直居中对齐

   .box:before {  content: '';  height: 100%;  vertical-align: middle;  display: inline-block;}.item {  display: inline-block;}

   突然发现，实现垂直居中的方法有很多，此处先列举几个作参考，如有纰误，欢迎评论指正。如遇到具体情况不知道怎么实现的同学，也可以私信我，日后也继续完善此贴。