4、如何实现一个宽度自适应，高度为宽度的一半的矩形，并且该矩形需要水平垂直居中（字节）

[shiwanjun1995]

分析两个点：
1、宽度自适应，高度始终为宽度一半；【此处需要记住一个知识点：padding-top/bottom和margin-top/bottom都是相对于父元素的宽度来计算的，参考的是父容器的宽度。】
2、垂直水平居中。【可以利用flex容器水平轴和交叉轴的属性来设置】
<div class="fa"></div>

.fa {
width: 100%;
padding-bottom: 50%; // 高度由 padding 撑开，高度也就相对于父元素宽度
height: 0; // 同时需要将 height 设置为0，这是为了将元素高度完全交给 padding 负责
display: flex;
align-items: center;}