CSS垂直居中的简单实现方式

1.

使用Flexbox

使用align-items或align-content的属性可以做到垂直居中的效果。

.use-flexbox{
    display:flex;
    align-items:center;
    justify-content:center;
    width:150px;
    height:150px;
    border:1px solid #000;
}
.use-flexbox div{
    width:50px;
    height:50px;
    background:#999;
}

2.

使用 Line-Height 

可以使用 line-height 实现图片的垂直居中。把图片设置vertical-align: middle，并在含图片的父元素上设置 line-height 。

html

<div id="parent">
    <img src="img.png" alt="" />
</div>

css

#parent { 
    line-height: 300px;
}

#parent img {
    vertical-align: middle;
}

3.

使用display:table-cell

html

<div id="parent">
    <div id="child">中间</div>
</div>

css

parent {display: table;}
#child {
    display: table-cell;
    vertical-align: middle;
}