Can i put a box in half over another box (without px)?

Issue

Is there an optimal solution for my problem? I have a green box with position: relative; and a white box with position: absolute;

The absolute box has top: 0; I only wish that the white box is exactly centered (with one half over the green box and the other half outside). Is there a solution for this in CSS, regardless of the height of the box in px?

Thank you in advance!

enter image description here

Solution

Translate is your friend:

.white-box {
  position: absolute;
  top: 0;
  transform: translateY(-50%);
}

Answered By – Mike Robinson

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published