1.display:table
给父元素加上display:tanle将它的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。
#main{
display: table;
}
#cell {
display: table-cell;
vertical-align: middle;
}
<div id="main">
<div id="cell">
<div class="content">Content goes here</div>
</div>
</div>
2.绝对定位
这个方法使用绝对定位的div，把它的top 设置为 50％，top margin 设置为负的 content 高度的一般。这意味着对象必须在 CSS 中指定固定的高度。
#content {
position: absolute;
top: 50%;
height: 240px;
margin-top: -120px; /* negative half of the height */
}
<div class="content">Content goes here</div>
3.position
使用一个 position:absolute，有固定宽度和高度的 div。这个 div 被设置为 top:0; bottom:0;。但是因为它有固定高度，其实并不能和上下都间距为 0，因此 margin:auto; 会使它居中。使用 margin:auto;使块级元素垂直居中是很简单的。
#content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 240px;
width: 70%;
}
<div class="content">Content goes here</div>
4.line-height
将单行文本置中。只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了。
#content {
height: 100px;
line-height: 100px;
}
<div class="content">Content goes here</div>
5.flex
justify-content属性定义了项目在主轴上的对齐方式。
.container {
display: flex;
flex-direction: column;
justify-content: center;
height: 100px;
}
<div class="content">Content goes here</div>
