How to center an element horizontally and vertically

All about centering

When flexbox decides to bail on us due to browser compatibility, CSS Grid comes to the rescue. Utilize display: grid and place-items: center; is all it takes for a simple, single-line centering.

.grid-container {
  display: grid; /* Let's enter the Matrix */
  place-items: center; /* The oracle says - you're the center of the universe */
  height: 100vh; /* Or any height you desire, control is in your hands */
}


And when combining textual content with perfect vertical alignment, a line-height equal to the container height seems to do the trick:

.text-container {
  height: 60px; /* Get the ruler out */
  line-height: 60px; /* Matched it with height, because symmetry is beautiful */
  text-align: center; /* Being in the middle has never been this easy */
}


Sometimes flexbox and grid don't cut it, we could use the old-school but reliable table display method:

.table-container {
  display: table; /* Unleash your inner 90s web developer */
  width: 100%; /* Full width, because why not */
  height: 100vh;
}

.table-cell {
  display: table-cell; /* The cell, a solitary place, unless... */
  vertical-align: middle; /* ...you make it the center of attention */
  text-align: center; /* See, no longer solitary */
}


Navigation through rough seas

Overflow or known element dimensions can sometimes play tricks on our displacement. If you opt for position: absolute; make use of positive right: value along with top: 50%, right: calc(50% - 50px):

.element {
  position: absolute; /* I solemnly swear */
  top: 50%; /* ...that I am up to */
  right: calc(50% - 50px); /* ...no good, just centering */
  transform: translateY(-50%); /* Poof! Perfect centering */
}


Horizonal scrollbars causing a mess with your layout? Keep overflow-y property behavior in perspective and avert these potential situational hazards.

Centering strategies on fleek

The right centering technique depends on the use case. responsive designs cherish flexbox or grid more than absolute positioning. Always match your CSS strategy to ballpark the content's needs and layout requirements.

Remember, optimization is all about getting the maximum out of your layout with minimal HTML and unnecessary elements.

Centering variations

There are numerous ways to skin a cat when it comes to centering in CSS. Whether it's absolute positioning, flexbox, grid, or good old fashioned text-align, your mission should you choose to accept it, is to pick the one that suits your unique use case.