试图在矩形CSS上实现矩形[重复]

Posted 2023-03-05

【中文标题】试图在矩形CSS上实现矩形[重复]

【英文标题】：trying to achieve rectangle over rectangle CSS [duplicate]

【发布时间】：2018-05-17 09:30:29

【问题描述】：

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

【参考方案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>