CSS垂直居中的几种方法

1、通过 verticle-align:middle 实现 CSS 垂直居中

通过 vertical-align:middle 实现CSS垂直居中是比较使用的方法，但是有一点需要格外注意，vertical-align:middle 生效的需要元素为行内元素或者设置 display：inline-block 的块元素。

.parent {
    height: 100px;
    vertical-align: middle;
    border: solid 1px #333;
}
.child {
    display: inline-block;
}

2、通过 display:flex 实现 CSS 垂直居中

随着各在主流浏览厂商都逐步支持 flexbox 属性，通过“display:flex” 实现 CSS 居中的方案也越来越受青睐。

通过 display:flex 实现CSS垂直居中的方法只需父元素 display:flex; 子元素align-self:center。

.parent {
    height: 100px;
    display: flex;
    border: solid 1px #333;
}
.child {
    align-self:center
}

3、通过 display:table-cell 实现 CSS 垂直居中

父元素 display:table，子元素 display：table-cell 来方式实现CSS垂直居中。

.parent {
    height: 100px;
    display: table-cell;
    vertical-align: middle;
    border: solid 1px #333;
}

4、未知父元素高度通过 transform 实现 CSS 垂直居中

子元素设置 position: relative，通过 translateY 即可定位到垂直居中的位置。

.parent {
    height: 100px;
    border: solid 1px #333;
}
.child {
    height: 20px;
    position: relative;
    top: 50%;
    transform: translateY(-50%)
}

5、通过 line-height 实现 CSS 垂直居中

设置元素的 line-height 值等于父元素的 height，这种方法适用于子元素为单行文本的情况。

.parent {
    height: 100px;
    line-height: 100px;
    border: solid 1px #333;
}

6、通过 position: absolute 和 margin-top

.parent {
    height: 100px;
    position: relative;
    border: solid 1px #333;
}

.child {
    height: 20px;
    margin-top: -10px;
    position: absolute;
    top: 50%;
}