DEV Community

Discussion on: Horizontal centering in CSS

Collapse
alvaromontoro profile image
Alvaro Montoro

You can go around that issue by setting a relative position to 50%, then translating the content 50% (which in that case will be 50% of the size of the element and not the parent):

.exception {
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
}
Enter fullscreen mode Exit fullscreen mode

Here is an example: codepen.io/alvaromontoro/pen/mdWgKdx

Thread Thread
crinklesio profile image
Kevin Pennekamp Author • Edited on

Aah ofcourse, you are right. That is another solution for the same problem. Thanks for it.

I did found one downside though. This method feels to me to make it more difficult to have it scale better for responsiveness in cases where the child elements are less than 100vw and more than the --gap. But it is a personal preference I think.