trying to achieve rectangle over rectangle CSS

Question

I am trying to create a homepage that look like this but I am struggling to draw the pink rectangle and center it. Using CSS position resulted in a big mess

Answer 1

If your pink background will stay in the middle of the web page, then you can try this.

To draw the centered pink banner

• Position absolute
• Top 50%
• Left 50%
• Now to adjust it to the center just translate by 50% back (-50%, -50%)

What is happening here is normal math. You are ideally positioning the center of mass of the Pink banner by first moving the top tip of the rectangle by 50% of the parent and then retracting back by half width and half height.

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>