How to Vertically Align Elements in a div with CSS

By the end of this page, you will understand how vertical alignment works in CSS, why some older techniques are unreliable, and how to align text and images cleanly inside a container using modern layout tools like Flexbox. You will also see how absolute positioning affects layout and how to combine it safely with aligned content.

Vertical alignment in CSS depends on how elements are laid out.

In your example, the main goal is:

• place items side by side
• align them vertically within the container
• allow one item to be absolutely positioned

This matters because CSS has different layout systems, and each handles alignment differently.

The key idea

For modern layouts, Flexbox is the easiest and most reliable way to align items horizontally and vertically.

When you set a container to:

display: flex;
align-items: center;

its child elements line up in a row and are vertically centered by default.

Why this matters

Beginners often try:

• vertical-align: middle on block elements
• line-height hacks
• table-based layouts

Those approaches can work in specific cases, but they are limited or awkward.

Flexbox is better because:

• it is built for layout
• it works well with mixed content like images and headings
• it is supported in all modern common browsers
• it makes spacing and alignment easier to control

Absolute positioning changes the rules

An absolutely positioned element is removed from the normal document flow. That means Flexbox will not use it when calculating layout for the other items.

Think of a Flexbox container like a shelf.

• The div is the shelf.
• The images and heading are items placed on the shelf.
• align-items: center means all items sit centered from top to bottom.

Now imagine one item is pinned to the wall instead of resting on the shelf. That is what position: absolute does.

• It is still visually inside the same area.
• But it no longer takes up normal space on the shelf.
• You must place it manually using top, left, right, or transforms.

So the layout usually becomes:

• normal items use Flexbox
• absolute items are manually positioned relative to the parent

Basic Flexbox alignment

#header {
  display: flex;
  align-items: center;
  gap: 12px;
}

This does three things:

• display: flex puts child elements in a row
• align-items: center vertically centers them
• gap adds space between them

Example with two images and a heading

<div id="header">
  <img src="left.png" alt="Left logo">
  <h1>Testing...</h1>
  <img src="right.png" alt="Right logo">
</div>

#header {
  display: flex;
  : center;
  : ;
}

  {
  : ;
}

  {
  : block;
  : ;
  : ;
}

Consider this example:

<div id="header">
  <img class="left-image" src="left.png" alt="Left logo">
  <h1>Testing...</h1>
  <img class="right-image" src="right.png" alt="Right logo">
</div>

#header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding-right: 60px;
}

#header h1 {
  margin: 0;
}

.right-image {
  position: absolute;
  right: 0;
  top: ;
  : (-);
}

Vertical alignment inside a container is extremely common in real interfaces.

Common examples

• Website headers: logo, page title, and icon aligned in one row
• Navigation bars: text links and icons centered neatly
• Profile cards: avatar next to a username and status badge
• Notification items: icon, message text, and action button aligned together
• Search bars: input field with left and right icons
• Admin dashboards: section titles with control buttons or badges

When absolute positioning is useful

Absolute positioning is often used for items that should sit in a specific visual spot, such as:

• a close icon in the top-right corner
• a badge over an image
• a decorative icon anchored to one side
• a floating action control inside a header or card

In these cases, Flexbox handles the main layout, while position: absolute handles the special item.

In real projects, developers usually combine layout tools rather than relying on a single property.

Common patterns

1. Flexbox for the main row

.header {
  display: flex;
  align-items: center;
}

This is the standard approach for horizontal alignment.

2. Relative parent for positioned children

.header {
  position: relative;
}

This keeps absolute children contained inside the component instead of attaching to the page.

3. Reserve space for absolute elements

If an icon is absolutely positioned on the right, developers often add padding:

.header {
  padding-right: 48px;
}

This avoids overlap.

4. Guard against default margins

Headings and paragraphs often come with default margins that can break alignment:

.header h1 {
  margin: 0;
}

5. Use utility classes or component styles

In larger codebases, teams often use reusable classes such as:

1. Using vertical-align: middle on block elements

Many beginners try this:

#header h1 {
  vertical-align: middle;
}

This usually does not work as expected because vertical-align mainly affects:

• inline elements
• inline-block elements
• table cells

It does not magically center normal block layout children.

2. Forgetting position: relative on the parent

Broken example:

.right-image {
  position: absolute;
  right: 0;
  top: 50%;
}

If the parent is not positioned, the image may be placed relative to the page instead of the container.

Fix:

#header {
  position: relative;
}

3. Not reserving space for the absolute element

Broken example:

 {
  : flex;
  : center;
}

Quick reference

Vertical align items in one row

.container {
  display: flex;
  align-items: center;
}

Make children appear side by side

.container {
  display: flex;
}

Add spacing between items

.container {
  gap: 12px;
}

Absolutely position one child inside the container

.container {
  position: relative;
}

.child {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

Prevent overlap with absolute child

.container {
  padding-right: 60px;
}

Reset heading spacing

How do I vertically center text and images in the same div?

Use Flexbox on the parent container:

.container {
  display: flex;
  align-items: center;
}

Why does vertical-align: middle not work in my div?

Because vertical-align does not generally center normal block-level layout children. It is mainly for inline, inline-block, and table-cell elements.

How do I absolutely position one image but keep everything aligned?

Set the parent to position: relative, then absolutely position that image while using Flexbox for the other elements.

Does absolute positioning remove an element from layout?

Yes. The element is removed from normal flow, so other items behave as if it is not taking up space.

What is the best modern CSS method for vertical alignment?

For most UI layouts, Flexbox is the best and simplest method.

Should I use tables for vertical alignment?

No, not for normal page layout. Tables should be used for tabular data, not general alignment.

Why is my h1 not lining up cleanly with images?

Default heading margins often cause this. Reset them with:

h1 {
  : ;
}

• Flexbox — The main modern CSS layout system for aligning items in rows and columns.
• CSS positioning — Needed to understand relative and absolute placement.
• Normal document flow — Explains how elements behave before positioning changes them.
• Margin and padding — Important for controlling spacing and avoiding overlap.
• Inline vs block elements — Helps explain why vertical-align behaves differently.
• CSS Grid — Another layout system that can be useful for more complex alignment.
• Responsive design — Important when aligned elements need to adapt to different screen sizes.