试图在矩形CSS上实现矩形

Question

我正在尝试创建一个看起来像这样的主页，但我正在努力绘制粉红色矩形并居中。使用CSS位置导致一团糟

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>