How to vertically center a `` inside a div?

Direct approach - Line-height

For those just looking to center single lines of text, consider setting the line-height of <span> to match the height of the div:

div {
  height: 50px; /* Sky's the limit - or not? */
}

span {
  line-height: 50px; /* Same as the mountain height - I mean div's height 👀 */
}


Voila! Lines of text now align smack-bang in the center, thanks to our good old friend line-height – pandering to our ascenders and descenders alike!

The wizard's touch - Positioning and Transforms

Feeling adventurous? Perhaps your <span> is more of a changeling? Fear not! Use a combination of relative and absolute positioning with CSS transform magic✨:

div {
  position: relative;
  height: 50px; /* As tall as you want it to be */
}

span {
  position: absolute;
  top: 50%; /* Midway to Narnia */
  left: 50%; /* Halfway to Hogwarts */
  transform: translate(-50%, -50%); /* Brings you back from the fantasy realm */
}


Off-stage and into the center spotlight, our fearless <span> comes regardless of its size. Give it up for the CSS transform! 🎊

Cater to the crowd - Multiple spans

Multiple performers? Give them all a standing ovation with perfect centering:

div {
  display: flex;
  flex-direction: column;
  justify-content: center; /* Equality for all, center for all! */
}

span {
  margin: auto; /* Personal space for everyone */
}


Mind the gap - Padding and borders

Skeptic about padding and borders? We have you covered:

div {
  display: flex;
  align-items: center;
  padding: 10px; 
  box-sizing: border-box; /* Our secret weapon against padding mutants */
}


With box-sizing: border-box;, padding infestations have left the chat. 👏

Centering alternatives

1. display: inline-block with vertical-align:middle: Use vertical-align: middle; alongside a pseudo-element for inline joy.

div:before {
  content: '';
  display: inline-block;
  vertical-align: middle;  /* Being "middle" in the middle */
  height: 100%;
  width: 0; /* Slimmer than your diet goals */
}

span {
  display: inline-block;
  vertical-align: middle;  /* Middle Earth summons */
}


2. display:table-cell method: Grid layouts love display: table; and display: table-cell; combined with vertical-align: middle;.

div {
  display: table;
}

span {
  display: table-cell; /* Welcome to the table! */
  vertical-align: middle; /*why not? It's cozy in the middle! */
}


3. Mobile responsiveness: Never ignore the thumbs. In the tiny universe of mobile screens – flexbox or transform remain your best allies:

@media (max-width: 768px) {
  div {
    display: flex;
    align-items: center; /* Thumbs up for vertically centered content! */
  }
}
