未知宽高元素垂直居中

[cfour-hi]

基础结构样式

<!-- html -->

<div class="wrap">
    <div class="content"></div>
</div>

/* css */

.wrap {
    width: 100%;
    height: 100%;
}

五种实现方式

1. position + transform

.content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

2. flex

.wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}

3. div.wrap display: tabel + div.content display: table-cell

.wrap {
    display: table;
    text-align: center;
}
.content {
    display: table-cell;
    vertical-align: middle;
}

4. 借助伪元素

.wrap {
    font-size: 0; /* 内容超过一行也能垂直居中 */
    text-align: center;
}
.wrap::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
}
.content {
    display: inline-block;
    font-size: 16px;
    vertical-align: middle;
}

5. 插入辅助元素（原理同上）

需要修改 html 结构

<div class="wrap">
    <i class="hide-text"></i>
    <div class="content"></div>
</div>

.wrap {
    font-size: 0;
    text-align: center;
}
.wrap .hide-text {
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
}
.content {
    display: inline-block;
    font-size: 16px;
    vertical-align: center;
}

第 4、5 个方法原理相同，都是要借助辅助元素，张鑫旭大大在慕课网上有一个系列的 css 课程非常实用，其中 CSS深入理解之vertical-align 可以帮助理解此原理。