How do I vertically align text in a div?

Mastering Vertical Alignment in Divs with CSS

Learn various CSS techniques to vertically align text and other content within a div element, ensuring perfect layout and responsiveness.

Vertically aligning content within a div element is a common challenge in web development. While horizontal alignment is often straightforward, achieving precise vertical positioning can sometimes feel like a puzzle. This article explores several robust CSS methods to vertically align text and other elements, catering to different scenarios and browser compatibility needs. We'll cover techniques using Flexbox, Grid, position with transform, and line-height, providing practical examples for each.

1. Using Flexbox for Flexible Alignment

Flexbox is arguably the most modern and versatile solution for layout and alignment in CSS. It provides a powerful way to distribute space among items in a container and align them, both horizontally and vertically. To vertically align content using Flexbox, you apply display: flex; to the parent container and then use align-items and justify-content properties.

<div class="flex-container">
  <p>Vertically Centered Text</p>
</div>

HTML structure for a Flexbox container

.flex-container {
  display: flex;
  align-items: center; /* Vertically centers content */
  justify-content: center; /* Horizontally centers content */
  height: 200px; /* Define a height for the container */
  border: 1px solid #ccc;
}

.flex-container p {
  margin: 0; /* Remove default paragraph margin */
}

CSS for vertical and horizontal centering with Flexbox

2. Aligning with CSS Grid

CSS Grid Layout is another powerful two-dimensional layout system that can easily handle vertical alignment. Similar to Flexbox, you define a grid container and then use alignment properties. Grid is particularly useful when you need to align items within a more complex grid structure.

<div class="grid-container">
  <span>Grid Aligned Text</span>
</div>

HTML structure for a Grid container

.grid-container {
  display: grid;
  place-items: center; /* Shorthand for align-items: center; justify-items: center; */
  height: 200px;
  border: 1px solid #ccc;
}

.grid-container span {
  /* No specific styles needed for the child */
}

CSS for vertical and horizontal centering with CSS Grid

3. Absolute Positioning with Transform

For scenarios where you need to vertically align a single element within a relatively positioned parent, the position: absolute; combined with transform: translateY(-50%); is a classic and effective method. This technique works by moving the element's top edge to the 50% mark of its parent and then shifting it back up by half of its own height, effectively centering it.

<div class="parent-relative">
  <p class="child-absolute">Absolutely Centered Text</p>
</div>

HTML structure for absolute positioning

.parent-relative {
  position: relative;
  height: 200px;
  border: 1px solid #ccc;
}

.child-absolute {
  position: absolute;
  top: 50%;
  left: 50%; /* For horizontal centering */
  transform: translate(-50%, -50%); /* Adjusts for element's own size */
  margin: 0; /* Remove default paragraph margin */
}

CSS for vertical and horizontal centering using absolute positioning and transform

4. Single-Line Vertical Alignment with Line-Height

If you only need to vertically align a single line of text within a div that has a fixed height, setting the line-height property equal to the div's height is a simple and effective trick. This method does not work well for multi-line text.

<div class="line-height-container">
  <span>Single Line Text</span>
</div>

HTML for line-height alignment

.line-height-container {
  height: 100px;
  line-height: 100px; /* Same as height for vertical centering */
  text-align: center; /* For horizontal centering */
  border: 1px solid #ccc;
}

.line-height-container span {
  display: inline-block; /* Required for vertical-align to work */
  vertical-align: middle;
  line-height: normal; /* Reset line-height for the text itself */
}

CSS for single-line vertical alignment using line-height

flowchart TD
    A["Start: Need to align text in a div?"] --> B{Is it a single line of text?}
    B -->|Yes| C{Does the div have a fixed height?}
    C -->|Yes| D["Use line-height = div height"]
    C -->|No| E["Consider Flexbox or Grid"]
    B -->|No| F["Is it a complex layout or multiple items?"]
    F -->|Yes| G["Use Flexbox or CSS Grid"]
    F -->|No| H["Is the element absolutely positioned?"]
    H -->|Yes| I["Use position: absolute; + transform"]
    H -->|No| G
    D --> J[End]
    E --> J
    G --> J
    I --> J

Decision flow for choosing a vertical alignment method