css居中布局

/* 1. 指定宽高的内容实现居中展示： */
        .box1 {
            width: 300px;
            height: 200px;
            background-color: pink;

            position: absolute;
            left: 50%;
            top: 50%;
            margin-left:  -150px;
            margin-top: -100px;
        }
/* 2. ❤️ 不指定高的内容实现居中展示： */
        .box2 {
             
            width: 300px;
            
            background-color: pink;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
        }