I have 2 problems

4

Yes sorry I did actually want to explain it but I got distracted and wanted to at least post the CSS.

Let me try, I might do a horrible job of this.

So we push the element from the left 50%. Now the left side of the element box is in the center, but we want the center of the element box to be in the center. So we move the element back by -50% of itself (i.e. half its width). Now the center of the element box is in the center of the parent container.

You can use the same technique to horizontal and vertical center an element inside the parent container.

.positioning-center-horizontal-vertical {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

I have a CodePen with some centering stuff

2 Likes