一、实现方式

实现元素水平垂直居中的方式:

• 居中元素（子元素）的宽高已知：

  • 利用定位+margin:负值
  • table布局

• 居中元素宽高未知

  • 利用定位+margin:auto
  • 利用定位+transform
  • flex布局
  • grid布局

1.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>

实现思路如下：

父级设置为相对定位，子级绝对定位，并且四个定位属性的值都设置为0，那么这时候如果子级没有设置宽高，则会被拉开到和父级一样宽高

这里子元素设置了宽高，所以宽高会按照我们的设置来显示，但是实际上子级的虚拟占位已经撑满整个父级，这个时候再给它一个 margin:auto 它就可以上下左右都居中

方案特点：

• 不需要知道父元素宽高
• 不需要知道子元素宽高

2.2 利用定位+margin:负值

绝大多数情况下，设置父元素为相对定位，子元素移动自身50%实现水平垂直居中

<style>
    .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;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

实现思路如下：

• 父级设置为相对定位，子级绝对定位
• 顶部 top 和左侧 left 的定位属性都设置为50%，此时子元素位置左上角就是页面中心点
• 设置margin的顶部和左侧分别为高宽的一半的负数时，子元素的位置就是中间位置

方案特点：

• 不要求父元素的宽高。不管父元素的宽高如何变化，都可以保持在父元素的水平垂直居中;
• 需要知道子元素自身的宽高

2.3 利用定位+transform

实现代码如下：

<style>
    .father {
        position: relative;
        width: 200px;
        height: 200px;
        background: skyblue;
    }
    .son {
        position: absolute;
        width: 100px;
        height: 100px;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background: red;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

实现思路如下：

• 父级设置为相对定位，子级绝对定位
• 顶部 top 和左侧 left 的定位属性都设置为50%，此时子元素位置左上角就是页面中心点
• translate(-50%, -50%)将会将元素位移自己宽度和高度的-50%

方案特点：

• 不需要知道父元素的宽高
• 不需要知道子元素的宽高

2.4 table布局

实现代码如下：

<style>
    .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;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

实现思路：

• 设置父元素为display:table-cell，子元素设置为display: inline-block
• 利用vertical和text-align可以让所有的行内块级元素水平垂直居中

方案特点：

• 需要知道父元素宽高，否则父元素的宽高将由子元素宽高撑起，达不到效果
• 不需要知道子元素宽高

2.5 flex弹性布局

实现代码如下：

<style>
    .father {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 200px;
        height: 200px;
        background: skyblue;
    }
    .son {
        width: 100px;
        height: 100px;
        background: red;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

实现思路如下：

• 父元素设置 display: flex，表示该容器内部的元素将按照flex进行布局
• align-items: center表示这些元素将相对于本容器水平居中
• justify-content: center表示这些元素相对于本容器垂直居中

方案特点：

• 不需要知道父元素宽高
• 不需要知道子元素宽高

2.6 grid网格布局

实现代码如下：

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

    }
    .son {
        width: 10px;
        height: 10px;
        border: 1px solid red
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

实现思路如下：

• 父元素设置 display: grid，表示该容器内部的元素将按照grid进行布局
• align-items: center表示这些元素将相对于本容器水平居中
• justify-content: center表示这些元素相对于本容器垂直居中

方案特点：

• 不需要知道父元素宽高
• 不需要知道子元素宽高

二、总结

根据元素标签的性质，可以分为：

• 内联元素居中布局
• 块级元素居中布局

2.1 内联元素居中布局

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

2.2 块级元素居中布局

• 水平居中
  • 定宽：margin: 0 aut0
  • 绝对定位+left: 50%+margin:负自身一半
• 垂直居中
  • position: absolute设置left、top、margin-left、margin-top(定高)
  • display: table-cell
  • transform: translate(x, y)
  • flex(不定高，不定宽)
  • grid(不定高，不定宽)，兼容性相对比较差