居中显示水平垂直居中

• flex弹性布局

        /* 给父元素设置css样式  利用flex布局实现子元素居中 */
        html{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: #66cccc;
        }

• 定位

        .box{
            width: 200px;
            height: 200px;
            background-color: #66cccc;

            position: absolute; /* 绝对定位 */
            top: 50%;
            left:50%;
            transform: translate(-50%, -50%); /*修改中心点位置 使主体位于中心*/
        }

        .box{
            width: 200px;
            height: 200px;
            background-color: #66cccc;

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