CSS 4种方式实现垂直居中

1. 当div有宽高时：设置position为绝对定位absolute

.middle{
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-50px;/* -1/2（height） */
    margin-left:-50px;/* -1/2（width）*/
}

 ps. 上面样式也可以利用计算属性（注意.利用calc时，运算符前后需要空格）简写为：

.middle{
    width:100px;
    height:100px;
    position:absolute;
    top:calc(50% - 50px);
    left:calc(50% - 50px);
}

2. 当未规定div宽高时：

.middle{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

3. 前2种都需要设置position为absolute,对排版影响较大，若不想设置position时：

.middle{
    width:200px;
    margin:50vh auto 0; /* vh:视窗高度 1vh=1%视窗 */
    transform: translateY(-50%);
       }

4.使用flex,先为.middle div的父级div设置样式：{display:flex;}，但有些浏览器不支持

.middle{
    margin:auto;
}