padding和margin的百分比的像素基准是谁

padding和margin的百分比的像素基准是其父元素的宽度。
基于这个特点来做个题，
写代码：css div 垂直水平居中，并完成 div 高度永远是宽度的一半（宽度可以不指定）；

<div class="outer">
    <div class="inner">
      <div class="box">hello</div>
    </div>
  </div>

.outer {
  width: 600px;
}

.inner {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 50%;
  background: red;
}

.box {
  position: absolute;
  width: 100%;
  height: 100%;
}

由于padding和margin的百分比的像素基准是其父元素的宽度。
其中 .box 就是容器，此时实现了 div 高度永远是宽度的一半（宽度可以不指定）

css div 垂直水平居中，这个就老生常谈了
给 .outer 增加样式

// 服务于垂直居中
    height: 100%;
// 水平居中
    margin: 0 auto;
    display: flex;
// 子元素垂直居中
    align-items: center;

此时实现 div.box 垂直水平居中，并完成 div.box 高度永远是宽度的一半（宽度可以不指定）；

.outer {
  width: 600px;
  height: 100%;
  background: rgb(225, 225, 235);
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.inner {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 50%;
  background: red;
}

.box {
  position: absolute;
  width: 100%;
  height: 100%;
}