水平垂直居中方式

1. 定位+margin:auto

<style>
    .father{
        width:500px;
        height:300px;
        border:1px solid #0a3b98;
        position: relative;
    }
    .son{
        width:100px;
        height:40px;
        background: #f0a238;
        position: absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

2. 定位+margin:负值

.father {
        position: relative;
        width: 200px;
        height: 200px;
        background: skyblue;
    }
    .son {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left:-50px;
        margin-top:-50px;
        width: 100px;
        height: 100px;
        background: red;
    }

3. 定位+transform

    .father {
        position: relative;
        width: 200px;
        height: 200px;
        background: skyblue;
    }
    .son {
        position: absolute;
        top: 50%;
        left: 50%;
  transform: translate(-50%,-50%);
        width: 100px;
        height: 100px;
        background: red;
    }

4. table布局

.father {
        display: table-cell;
        width: 200px;
        height: 200px;
        background: skyblue;
        vertical-align: middle;
        text-align: center;
    }
    .son {
        display: inline-block;
        width: 100px;
        height: 100px;
        background: red;
    }

5. flex布局

.father {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 200px;
        height: 200px;
        background: skyblue;
    }
    .son {
        width: 100px;
        height: 100px;
        background: red;
    }

6. grid网格布局

 .father {
            display: grid;
            align-items:center;
            justify-content: center;
            width: 200px;
            height: 200px;
            background: skyblue;

        }
        .son {
            width: 10px;
            height: 10px;
            border: 1px solid red
        }

7. 小结

7.1 内联元素居中布局

水平居中： 行内元素设置text-align:center display:flex;justify-content:center 垂直居中： 单行文本父元素确认高度：height === line-height 多行文本父元素确认高度：display：table-cell；vertical-align：middle

7.2 块级元素居中布局

水平居中： 定宽：margin：0 auto 绝对定位+left：50%+margin：负自身一半 垂直居中：

• position：absolute设置left，top，margin-left，margin-top(定高)
• display：table-cell
• transform：translate(x,y)
• flex(不定高，不定宽)
• grid(不定高，不定宽，兼容性较差)