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 approaches are unreliable, and how to use modern layout tools like Flexbox to align text and images cleanly inside a div. You will also learn how absolute positioning affects layout and how to combine it safely with normal document flow.

Vertical alignment in CSS can mean different things depending on the layout context.

For elements like text, images, and inline items, alignment behaves differently than it does for block-level layout. In your example, you want:

• multiple elements on the same horizontal row
• their vertical centers aligned
• one element positioned absolutely inside the container

This matters because CSS layout rules depend on how elements participate in layout:

• Normal flow: elements take up space naturally
• Inline/inline-block layout: items sit on a line, affected by text baselines
• Flexbox layout: items are aligned along horizontal and vertical axes intentionally
• Absolute positioning: the element is removed from normal flow and positioned relative to an ancestor

Historically, vertical alignment was tricky in CSS. Developers used hacks such as line-height, display: table-cell, or manual margins. Today, Flexbox is the standard and most reliable way to align items vertically and horizontally in a row.

A key detail: if one image is position: absolute, it no longer affects the layout of the other elements. That means the remaining image and the h1 can be aligned with Flexbox, while the absolutely positioned image can be placed independently inside the same container.

Think of the div as a shelf.

• With Flexbox, the shelf neatly lines up all items in a row and lets you center them vertically.
• With absolute positioning, one item is taken off the shelf and pinned to a specific spot on the wall behind it.

So you have two layout systems working together:

• the shelf handles the normal items
• the pinned item is placed manually

This explains why absolutely positioned elements do not push other elements away unless you add spacing for them yourself.

The most common modern solution is to make the container a flex container.

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

What this does

• display: flex; puts the children in a row by default
• align-items: center; vertically centers them within the container
• position: relative; makes the container the positioning reference for any absolutely positioned child
• gap: 12px; adds space between normal-flow items

Basic example

<div id="header">
  <img class="logo" src="left.png" alt="Logo">
  <h1>Testing...</h1>
  <img class="badge" src= =>

Consider this example:

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

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

.left {
  width: 40px;
  height: 40px;
}

h1 {
  margin: 0 0 0 10px;
}

.right {
  : absolute;
  : ;
  : ;
  : (-);
  : ;
  : ;
}

Vertical alignment inside a container appears everywhere in real interfaces.

Common examples

• Website headers: logo, page title, notification icon
• Navigation bars: icon + label + user avatar
• Cards: thumbnail, title, and action button aligned in one row
• Chat apps: profile image, username, and status icon
• Admin dashboards: section title with badges or action buttons
• Media players: album image, track title, and play controls

When absolute positioning is useful

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

• a badge in the top-right corner
• an overlay icon on an image
• a menu button aligned to the far edge
• a close icon inside a header or modal

In real projects, developers usually solve this with Flexbox first, then use absolute positioning only when an item should not affect the main layout.

Common patterns

1. Flex container for row alignment

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

This is the standard pattern for headers, toolbars, and list items.

2. Relative parent + absolute child

.header {
  position: relative;
}

.header__icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}

This is used for badges, overlays, and pinned controls.

3. Guarding against overlap

Developers often add padding where the absolute element lives.

.header {
  padding-right: 48px;
}

4. Resetting default heading margins

Headings often have top and bottom margins by default, which can make alignment look wrong.

1. Using vertical-align: middle on block elements

Beginners often try this:

#header h1 {
  vertical-align: middle;
}

This usually does not work as expected because vertical-align applies mainly to inline, inline-block, and table-cell elements.

2. Forgetting position: relative on the parent

Broken example:

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

If the parent is not position: relative, the image may position itself relative to the page or another ancestor.

Fix:

#header {
  position: relative;
}

3. Not accounting for absolute elements overlapping content

Broken example:

#header {
  display: flex;
  : center;
}

Flexbox vs vertical-align

• Use Flexbox when aligning multiple UI elements in a container.
• Use mainly for inline content like text and icons.

/* Best modern default */
.container {
  display: flex;
  align-items: center;
  position: relative;
}

Vertical alignment rules

• align-items: center vertically centers flex items
• position: relative on the parent creates the reference point for absolute children
• position: absolute removes the child from normal flow
• top: 50% + transform: translateY(-50%) centers an absolute element vertically
• headings like h1 often need margin: 0

Useful pattern

.header {
  display: flex;
  align-items: center;
  position: relative;
  padding-right: 50px;
}

.header h1 {
  margin: 0;
}

.header .icon {
  position: absolute;
  : ;
  : ;
  : (-);
}

How do I vertically center text and images inside a div?

Use Flexbox on the container:

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

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

Because vertical-align is mainly for inline, inline-block, and table-cell elements, not general block layout.

How do I vertically center an absolutely positioned image?

Use:

position: absolute;
top: 50%;
transform: translateY(-50%);

Why is my absolute image overlapping the heading?

Because absolute elements do not take up layout space. Add padding or margin to reserve room.

Should I use Flexbox or absolute positioning for alignment?

Use Flexbox for the main layout. Use absolute positioning only for items that need fixed placement within the container.

Do I need browser prefixes for Flexbox?

In most modern projects, no. Flexbox is widely supported in common browsers.

Is <img></img> valid HTML?

• Flexbox — the main modern layout system for aligning items in rows and columns.
• Absolute positioning — useful when an element should be placed independently of normal layout.
• CSS display property — controls whether elements behave as block, inline, flex, and more.
• Box model — helps explain spacing, padding, and why overlap happens.
• Margin and padding — important for creating space around aligned elements.
• Inline vs block elements — explains why vertical-align behaves differently depending on element type.
• CSS transforms — used for centering absolute elements with translateY(-50%).
• Responsive layout — important when aligned elements must adapt to different screen sizes.