CSS实现垂直居中

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>