css垂直居中

假定dom元素如下：

<div class="parent">
      <span class="son"></span>
</div>

1. display：table

外部容器设置display: table，内部容器设置display: table-cell; 内部容器还可包含图片文字等需要居中的元素
亲测实用

.parent {display: table;}
.son {display: table-cell; vertical-align: middle;}

直接对块级元素使用vertical-align是不能解决这个问题的，vertical-align定义行内元素的基线相对于该元素所在行的基线的垂直对齐
此方法只限于标准浏览器，display: table-cell; 时margin会失效

2. absolute和0

利用margin:auto;和上下左右值置0的方法实现，子元素需要定宽高

.parent {position: relative;}
.son {
    width: 20px; height: 20px;
    position: absolute; left: 0;right: 0;top: 0;bottom: 0;
    margin: auto; 
 }

3. absolute和负值

.parent {position:relative;}
.son {
      position: absolute;
      width: 80px;height: 60px;
      top: 50%;left: 50%;
      margin-left: -40px;margin-top: -30px;
}

4. absolute和translate

此方法其实是3的另一种写法，移位通过translate实现

.parent {position:relative;}
.son {
      position: absolute;
      width: 80px;height: 60px;
      top: 50%;left: 50%;
      transform:translate(-50%,-50%);
}

5. flex和margin

.parent { display: flex; }
.son { margin: auto; }

6. 伪类

.parent { width: 200px;height: 120px; }
.parent:before {
       content: '';
       width: 0;
       height: 100%;
       display: inline-block;
       vertical-align: middle;
}
.son {
       display: inline-block;
       width: 100px;height: 60px; background-color: #ff0;
       vertical-align: middle;
}

7. vertical-align

在居中一些文字时，我们经常会采用line-height实现，但是居中一些其他元素或者图片，就无效了，可结合vertical-align试试

作用环境：父元素设置line-height。
作用对象：子元素中的inline-block和inline元素。

.parent { width:200px; height:120px; line-height:120px; text-align:center;}
.son {
       display:inline-block;
       width:100px; height:60px; background-color:#ff0;
       vertical-align:middle;
}