css的水平垂直居中

1.父元素使用flext布局，justify-content:center,align-items:center

2.父元素使用grid布局

        .container{
            display: grid;
            place-items: center;
        }

3.绝对定位法+偏移法

父元素使用相对定位，子元素绝对定位，并设置top:50%,left:50%。

• 若子元素不知道宽高，使用transform:translate()将元素相对自身的位置向x轴和y轴各移动-50%

        .container{
            position: relative;
            height: 400px;
        }
        .box{
            position: absolute;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
        }

• 在子元素有固定宽高的情况下，将margin-top设置为高度一半的负值，margin-left设置为宽度一半的负值

        .container{
            position: relative;
            height: 400px;
        }
        .box{
            width: 200px;
            height: 200px;
            position: absolute;
            top:50%;
            left:50%;
            margin-left:-100px;
            margin-top: -100px;
        }

又或者将子元素的top、left、right、bottom都设为0，然后使用margin:auto

        .container{
            position: relative;
            height: 400px;
        }
        .box{
            width: 200px;
            height: 200px;
            position: absolute;
            top: 0;
            left:0;
            bottom: 0;
            right: 0;
            margin: auto;
        }

4.子元素是行内元素或行内块元素，将父元素的text-align设为center以便让子元素水平居中，垂直居中的方法如下

方法1: 使用::after给容器增加一个高度为100%，content为空格的子元素，并将所有子元素的vertical-align设为middle（注意： 原本的子元素不能有高度）

        .container{
            height: 400px;
            width: 400px;
            text-align: center;
        }
        .container::after{
            display: inline-block;
            height: 100%;
            content: ' ';
            vertical-align: middle;
        }
        .box{
            display: inline-block;
            vertical-align: middle;
        }

• 方法2: 把父元素的display设为table-cell，并设置vertical-align:middle；

        .container{
            height: 400px;
            width: 400px;
            border: 1px solid gray;
            text-align: center;
            vertical-align: middle;
            display: table-cell;
        }
        .box{
            display: inline-block; /*或inline*/
        }

• 方法3: line-height方法：若父元素有固定高度，将子元素的line-height设置了跟父元素一样

        .container{
            height: 400px;
            width: 400px;
            border: 1px solid gray;
            text-align: center;
            display: table-cell;
        }
        .box{
            line-height: 400px;
        }