实现水平垂直居中

1. 绝对定位 + margin: auto

• 该方法适合于盒子有宽高的情况
• 利用绝对定位，设置四个方向都是0，并把margin设置为auto
• 由于宽高固定，对应方向实现平分，可以实现水平垂直居中

.parent {
    position: relative;
} 
.child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
<!   HTML结构如下 宽高均为100px 有需要设置宽高的单独设置即可-->
<div class="parent" style="background-color: green;">
        <div class="child" style="background-color: yellow;">我要水平垂直居中</div>

2. 绝对定位 + margin负值

• 该方法适合于盒子有宽高的情况
• 将元素的左上角通过top:50%和left:50%定位到页面的中心
• 再通过margin负值来调整元素的中心点到页面的中心

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;     /* 自身 height 的一半 */
    margin-left: -50px;    /* 自身 width 的一半 */
}

3. 绝对定位 + translate

• 先将元素的左上角通过top:50%和left:50%定位到页面的中心
• 再通过translate来调整元素的中心点到页面的中心
• 该方法需要考虑浏览器兼容问题，未知盒子宽高也适用

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

4. flex布局

• 父元素使用flex布局
• 通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对齐，它的子元素也可以实现垂直和水平的居中
• 该方法要考虑兼容的问题，在移动端用得较多，未知盒子宽高也适用

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