Center text vertically with CSS

For a label or message that may wrap, give its container enough height and use flex or grid alignment. A single line-height trick becomes fragile when the text grows.

Working example

<div class="panel">
  <p>This message is centered even when the text wraps onto several lines.</p>
</div>

.panel {
  display: grid;
  place-items: center;
  min-height: 12rem;
  padding: 1rem;
  background: #dbeafe;
}
p {
  max-width: 18rem;
  margin: 0;
  text-align: center;
}

<div class="row">
  <span class="badge">Tip</span>
  <p>A row flex container aligns these items on its vertical cross axis.</p>
</div>

.row {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 8rem;
  padding: 1rem;
  border: 1px solid #2563eb;
}
.badge {
  padding: 1rem;
  background: #dbeafe;
}

Match the property to the layout

In grid, place-items combines item alignment on both axes. In a row flex container, align-items: center centers on the cross axis, which is vertical in this example. With flex-direction: column, that cross axis becomes horizontal.

Equal top and bottom padding gives balanced space around text, but does not align it within an independently sized container. A line-height matching a fixed height can center one line; wrapping adds more line boxes and may overflow.

What about vertical-align?

vertical-align applies to inline-level boxes and table cells. It is not a general block-centering property. Absolute positioning with translation needs a containing block and leaves normal flow; it is useful for overlays, but not a substitute for a flexible content layout.

Sources

Reference 1 Reference 2 Reference 3 provide the technical details and current compatibility information.