今日头条面试

1.实现一个长高3：4的长方形水平垂直居中，要求长方形长宽自适应变化。

方法1：利用的是padding百分比是以元素宽度为基准的特点，缺点是内部元素定位只能使用绝对定位。

        #div1 {
            width: 50%;
            height: 0;
            padding-top: 37.5%;
            background-color: aqua;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

方法2：利用的是宽度单位vw，其取值是将浏览器宽度分为了一百份。

        #div1 {
            width: 50vw;
            height: 37.5vw;
            background-color: aqua;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

关于居中处理还可以使用以下这种方法：

        #div1 {
            width: 50vw;
            height: 37.5vw;
            background-color: aqua;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto; /*这行代码是关键*/
        }

这也能达到水平垂直居中的效果。