垂直居中

https://www.jianshu.com/p/771350509f76

1、单行文本-单元素：line-height

image.png

<style>
    .box{
        width: 100%;
        line-height:100px;
        text-align:center;
        background: #ea6f5a;
    }
</style>
<div class="box">单行文本</div>

2、单行文本-多元素： Line-height + inline-block

image.png

<style type="text/css">
    .box{
        width: 100%;
        background: #eee;
        line-height: 150px;
        text-align: center;
    }
    .box2 .content{
        display: inline-block;
        height: auto;
        line-height:1;
        width: 80%;
        background: #ea6f5a;
    }
</style>
<div class="box box2">
    <div class="content">
        <a href="javascript:;">line-height + inline-block</a>
    </div>
</div>

该方法和一区别不大，个人更偏向于方法一；

3、多行文本： :before + inline-block

image.png

<style type="text/css">
.box{
    width: 100%;
    height: 250px;
    background: #eee;
    text-align: center;
}
.box::before{
    content:'';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.box .content{
    width: 80%;
    background: #ea6f5a;
    display: inline-block;
    vertical-align: middle;
}
</style>
<div class="box box3">
    <div class="content">
        <span>多行文本</span><br>
        <span>多行文本</span><br>
        <span>多行文本</span><br>
        <span>多行文本</span><br>
    </div>
</div>

可能会有描述不准确的，各位看官，请多指教！

垂直居中一直采用定位的方式；可每每用，心都在隐隐作痛；终于，在一个阳光明媚的下午，知道了原来垂直居中，也可以不用定位咩！
上代码：

div{
    height: 186px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}