假定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;
}
