css实现垂直居中的7种方法

前情提要： 能不写 height 就千万别写 height

1: table自带的功能

.parent {
    border: 1px solid red;
    height: 600px;
}
.child {
    border: 1px solid purple;
}

<table class="parent">
    <tr>
        <td class="child">
            这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，
            这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，
            这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，
            这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，
            这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，
            这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，
            这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，
            这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，
        </td>
    </tr>
</table>

2: 100% 高度的 after before 加上 inline block

.parent {
    border: 3px solid red;
    height: 600px;
    text-align: center;
}
.child {
    border: 3px solid purple;
    display: inline-block;
    width: 300px;
    vertical-align: middle;
}
.parent .before {
    outline: 3px solid red;
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.parent .after{
    outline: 3px solid red;
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

<div class="parent">
    <span class=before>12</span>
    <div class="child">
        这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，
        这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，
        这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，
        这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，
        这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，
        这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，
        这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，
        这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，
    </div>
    <span class=after>12</span>
</div>

2-1: 优化

.parent {
    border: 3px solid red;
    height: 600px;
    text-align: center;
}
.child {
    border: 3px solid purple;
    display: inline-block;
    width: 300px;
    vertical-align: middle;
}
.parent::before{
    content: '';
    outline: 3px solid red;
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.parent::after{
    content: '';
    outline: 3px solid red;
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

<div class="parent">
    <div class="child">
        这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，
        这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，
        这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，
        这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，
        这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，
        这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，
        这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，
        这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，
    </div>
</div>

3: div 伪装成 table

div.table{
    display: table;
    border: 1px solid red;
    height: 600px;
}
div.td{
    display: table-cell;
    border: 1px solid blue;
    vertical-align: middle;
}
.child{
    border: 10px solid black;
}

<div class="table">
    <div class="td">
        <div class="child">
            这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，
            这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，
            这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，
            这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，
            这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，
            这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，
            这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，
            这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，
        </div>
    </div>
</div>

4.margin-top -50%

.parent{
    height: 600px;
    border: 1px solid red;
    position: relative;
}
.child{
    border: 1px solid green;
    width: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -150px;
    height: 100px;
    margin-top: -50px;
}

<div class="parent">
    <div class="child">
        这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，
        这里全都是文字啊，这里全都是文字啊，这里全都是文字啊
    </div>
</div>

5.translate -50%

.parent{
    height: 600px;
    border: 1px solid red;
    position: relative;
}
.child{
    border: 1px solid green;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

<div class="parent">
    <div class="child">
        这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，
        这里全都是文字啊，这里全都是文字啊，这里全都是文字啊
    </div>
</div>

6.absolute margin auto

.parent{
    height: 600px;
    border: 1px solid red;
    position: relative;
}
.child{
    border: 1px solid green;
    position: absolute;
    width: 300px;
    height: 200px;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

<div class="parent">
    <div class="child">
        这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，
        这里全都是文字啊，这里全都是文字啊，这里全都是文字啊
    </div>
</div>

7.flex

.parent{
    height: 600px;
    border: 3px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
}
.child{
    border: 3px solid green;
    width: 300px;
}

<div class="parent">
    <div class="child">
        这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，这里全都是文字啊，
        这里全都是文字啊，这里全都是文字啊，这里全都是文字啊
    </div>
</div>