html - 试图在矩形 CSS 上实现矩形

Question

<分区>

Answer 1

如果你的粉红色背景会停留在网页中间，那么你可以试试这个。

绘制居中的粉色横幅

• 绝对位置
• 前 50%
• 剩下 50%
• 现在要将它调整到中心，只需向后平移 50%(-50%、-50%)

这里发生的是正常的数学运算。理想情况下，您首先将矩形的顶端移动父级的 50%，然后缩回一半宽度和一半高度，从而定位粉红色横幅的重心。

html, body {
  height: 100%;
  width: 100%;
  margin: 0px;
}

.container {
  width: 100%;
  height: 100%;
  background: black;
}

.pink {
  background: pink;
  position: absolute;
  height: 75%;
  width: 75%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<div class="container">
  <div class="pink">
  </div>
</div>