CSS居中

1.绝对居中（块级元素居中）

首先给div添加绝对定位，并设置上下左右边距为0，然后使用margin: auto;自动居中。

            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;

2.水平垂直居中

            display: flex;
            justify-content: center;
            align-items: center;

3.定位+变形居中

             position: absolute;
             top: 50%;
             left: 50%;
             transform: translate(-50%,-50%);

注：跟第一张图效果一样

4.行内元素居中

text-align:center