css3 复习-JZTXT

1.不固定宽高实现水平居中，垂直居中

一共有3种方法

flex
display: table-cell; vertical-align: middle;text-align: center;
transform: translate(-50%, -50%);

方法二：

.box {
            width: 300px;
            height: 300px;
            background-color: red;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }

        .sub {
            background-color: yellow;
            display: inline-block;
        }

方法三：

 .box {
            width: 300px;
            height: 300px;
            background-color: red;
            position: relative;
        }

        .sub {
            border: 1px solid #ddd;
            position: absolute;
            text-align: center;
            left: 50%;
            top: 50%;
            background: yellow;
            transform: translate(-50%, -50%);
        }