水平垂直居中

水平居中

1. 子元素为行内元素且 未脱离文档流，给父元素设置 text-align: center; 实现行内元素水平居中。
2. 子元素为块级元素同时有 width，子元素设置 margin: 0 auto; 实现块级元素水平居中。
3. 子元素设置 display: flex;justify-content: center; 实现子元素水平居中。
4. 子元素设置 position: absolute;left: 50%;transform: translateX(-50%); 实现子元素水平居中。
5. 子元素设置 position: absolute;width: 固定;left: 0;right: 0;margin: 0 auto; 实现子元素水平居中。

垂直居中

1. 子元素为行内元素，给父元素设置 line-height 为 height 值 实现子元素垂直居中。
2. 子元素 未脱离文档流且不为行内块，高度随意 元素,给父元素设置 display: table; 子元素设置 display: table-cell;vertical-align: middle; 实现子元素垂直居中。
3. 父元素设置 display: flex;align-item: center; 实现子元素垂直居中。
4. 子元素设置 postion: absolute;top: 50%;transform: translateY(-50%); 实现子元素垂直居中。
5. 子元素 有固定高 设置 position: absolute;top: 50%;margin-top: -0.5height 实现子元素垂直居中。
6. 子元素设置 display: absolute;height:固定;top: 0;bottom: 0;margin: auto 0; 实现子元素垂直居中。

水平垂直居中

    .son {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .son {
        position: absolute;
        width: 固定;
        height: 固定;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }

    .son {
        position: absolute;
        width: 固定;
        height: 固定;
        top: 50%;
        left: 50%;
        margin-top: -1/2 * height;
        margin-left: -1/2 * width;
    }

在整个页面垂直居中

    div {
        position: fixed;
        left: 50%;
        top: 50%;
        width: 固定;
        height: 固定;
        margin: -1/2 * width 0 0 -1/2 * height;
    }