How to Vertically Center a Span within a Div

Vertical alignment can be perplexing in CSS, and aligning a span within a div is no exception.

Understanding CSS Alignment

Before diving into solutions, it's crucial to understand vertical alignment in CSS:

• Natural Alignment: Inline elements (like span) are naturally aligned at the baseline, which is the bottom of the lowest character.
• Line Height: The line-height property sets the height of a line box, which encloses both the character and any leading space.
• Intrinsic Height: The intrinsic height of an element is the space it takes up without any styling or padding.

Vertical Alignment Techniques

To center a span vertically within a div, consider these techniques:

1. Matching Line Height to Container Height:

Set the line-height of the span to match the height of the div. For example, if the div is 15px high, set line-height: 15px; on the span.

2. Absolute Positioning:

Set position: absolute; on the div and position: absolute; top: 50%; on the span. Then adjust the margin-top value of the span to half of its intrinsic height.

3. Transform: translateY

Use the transform: translateY(-50%); property on the span. This vertically shifts the span by half of its intrinsic height.

4. Flexbox

Utilize Flexbox to vertically center the span. Set display: flex; align-items: center; on the div and margin: auto; on the span.

Code Sample

Here's an example using the line-height method:

  as