css垂直水平居中常用的几种方法

回顾几种常用到的css居中方案，从最常用的说起：

1. 单行文本的垂直水平居中

            /* line-height: 设置为盒子的高度*/
            line-height: 200px;
            text-align: center;

2. display: flex;实现的盒子内部垂直水平居中：

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

3. position: absolute;实现的盒子在其他盒子中垂直水平居中：

            position: absolute;
            top: 50%;
            left: 50%;
            /* margin负盒子自身宽高的一半 */
            margin-top: -100px; 
            margin-left: -100px;

4. 若是不知道自身盒子的宽高，那么可以运用transform: translate(-50%,-50%)：

            position: absolute;
            top: 50%;
            left: 50%;
            /* margin负盒子自身宽高的一半 */
            /* margin-top: -100px; 
            margin-left: -100px; */
            transform: translate(-50%,-50%);

5. 若是盒子宽高固定，那么可以：

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

6. table实现盒子的居中，为其嵌套一层父级盒子，父级盒子设置display: table;自身设置display: table-cell;vertical-align: middle;

        .outer {
            width: 600px;
            height: 600px;
            margin-top: 100px;
            margin-left: 500px;
            background: palegoldenrod;

            display: table;

        }
        .inner {
            width: 200px;
            height: 200px;
            /* line-height: 设置为盒子的高度*/
            line-height: 200px;
            text-align: center;
            background: deepskyblue;

            display: table-cell;
            vertical-align: middle;

        }

以上便是我常用到的垂直水平居中方法