css实现水平-垂直居中的方法

* 定宽居中：

　　1.absolute+负margin

　　2.absolute+margin:auto

　　3.absolute——calc

　　4.min-height:100vh + flex + margin:auto

* 不定宽居中

　　1.absolute + transform

　　2.lineheight

　　3.writing-mode

　　4.caa-table

　　5.flex

　　6.grid

一、定宽居中

　　1.absolute+负margin

position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;

　　2.absolute+margin:auto

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

　　3.absolute——calc

position:absolute;
top:calc(50% - 50px);
left:calc(50% - 50px);

　　4.min-height:100vh + flex + margin:auto

        main{
            min-height: 100vh;
            /* vh相对于视窗的高度，视窗高度是100vh */
            /* “视区”所指为浏览器内部的可视区域大小，
            即window.innerWidth/window.innerHeight大小，
            不包含任务栏标题栏以及底部工具栏的浏览器区域大小。 */
            display: flex;
        }
        div{
            width: 50px;
            height: 50px;
            background-color: red;
            margin: auto;
        }

二.不定宽居中

　　1.absolute+transform（依赖translate 2d的兼容性）

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

　　2.lineheight

        .wp {
            border: 1px solid red;
            width: 300px;
            height: 300px;
            /* 2、不定宽高居中  */
            text-align: center;
            line-height: 300px;
            font-size: 0px;
        }

        .box {
            /* 2、不定宽高居中lineheight */
            display: inline-block;
            vertical-align: middle;
            line-height: inherit;
            text-align: left;
            font-size: 16px;
        }

　　3.

.wp {
            border: 1px solid red;
            width: 300px;
            height: 300px;
            /* 3、不定宽高居中css-table */
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }

        .box {
            /* 3、 */
            display: inline-block;
        }

　　4.

        .wp {
            border: 1px solid red;
            width: 300px;
            height: 300px;
            /* 4、不定宽高居中flex */
            display: flex;
            justify-content: center;
            align-items: center;
        }

　　5、不定宽高居中grid

display: grid;
justify-self: center;
align-self: center;

　　参考地址：https://www.jianshu.com/p/1b3337214941