如何实现 div 水平+垂直+水平垂直居中？

水平居中

1. 子元素添加margin: 0 auto 属性

<style>
    .container {
        width: 500px;
        height: 500px;
        background-color: pink;
    }
    
    .box {
        width: 100px;
        height: 100px;
        margin: 0 auto;
        background-color: #f00;
    }
</style>

<div class="container">
    <div class="box">子元素</div>
</div>

2. 父元素文本对齐方式为居中对齐；子元素设置为display: inline-block

<style>
    .container {
        width: 500px;
        height: 500px;
        text-align: center;
        background-color: pink;
    }
    
    .box {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: #f00;
    }
</style>

<div class="container">
    <div class="box">子元素</div>
</div>

3.（绝对定位） —— 父元素设置为相对定位，子元素设置为绝对定位， 子元素左、右方向的值设置为0，添加margin：auto属性

<style>
    .container {
        position: relative;
        width: 500px;
        height: 500px;
        background-color: pink;
    }
    
    .box {
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        width: 100px;
        height: 100px;
        background-color: #f00;
    }
</style>

<div class="container">
    <div class="box">子元素</div>
</div>

4.（flex布局）—— 父元素设置display: flex,设置主轴对齐方式为 justify-content: center（默认主轴方向为水平方向）

<style>
    .container {
        display: flex;
        width: 500px;
        height: 500px;
        justify-content: center;
        background-color: pink;
    }
    
    .box {
        width: 100px;
        height: 100px;
        background-color: #f00;
    }
</style>

<div class="container">
    <div class="box">子元素</div>
</div>

垂直居中

1.（绝对定位）—— 父元素设置为相对定位，子元素设置为绝对定位，设置子元素的top: 50%，即让子元素的左上角垂直居中

<style>
    .container {
        position: relative;
        width: 500px;
        height: 500px;
        background-color: pink;
    }
    
    .box {
        position: absolute;
        top: 50%;
        width: 100px;
        height: 100px;
        margin-top: -50px; 
        /* 高度固定 margi-top: -（自身高度的一半）; 若高度不固定使用 transform: translateY(-50%);*/
        background-color: #f00;
    }
</style>

<div class="container">
    <div class="box">子元素</div>
</div>

2.（flex布局）—— 父元素设置display:flex,设置align-items: center;(默认主轴方向为水平方向)

<style>
    .container {
        display: flex;
        width: 500px;
        height: 500px;
        align-items: center; /* 若有多个交叉轴则使用 align-content: center;*/
        background-color: pink;
    }
    
    .box {
        width: 100px;
        height: 100px;
        background-color: #f00;
    }
</style>

<div class="container">
    <div class="box">子元素</div>
</div>

水平垂直居中

1.（绝对定位）—— 父元素设为相对定位，子元素为绝对定位，子元素四个方向的值设置为0，设置margin：auto属性

<style>
    .container {
        position: relative;
        width: 500px;
        height: 500px;
        background-color: pink;
    }
    
    .box {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>

<div class="container">
    <div class="box">子元素</div>
</div>

2.（绝对定位）—— 父元素设为相对定位，子元素为绝对定位，top:50%; left:50%

<style>
    .container {
        position: relative;
        width: 500px;
        height: 500px;
        background-color: pink;
    }
    
    .box {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100px;
        height: 100px;
        margin: -50px 0 0 -50px; /* margin-top: -(自身高度的一半); margin-left:-(自身宽度的一半)*/
        /* 若宽高不固定 使用 transform: translate(-50%,-50%) */
        background-color: red;
    }
</style>

<div class="container">
    <div class="box">子元素</div>
</div>

3.（flex布局）—— 父元素设为display:flex，主轴对齐方式为 justify-content: center; 交叉轴对齐方式为 align-items: center;

<style>
    .container {
        display: flex;
        justify-content: center;
        align-items: center; /* 多个交叉轴用 align-content: center */
        width: 500px;
        height: 500px;
        background-color: pink;
    }
    
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>

<div class="container">
    <div class="box">子元素</div>
</div>