CSS snippet: absolute center

Ensure the parent element has position: relative and then apply the following styles to the child element that you want to center relative to the parent element:

.position-relative {
  position: relative
}

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

For example:

<div className="position-relative">
  <div className="absolute-center">I'm centered</div>
</div>

Tagged: CSS

Leave a comment Cancel reply