Flexbox Alignment: justify-content and align-items (How to Center a Div)

Flexbox alignment uses justify-content for the main axis and align-items for the cross axis. Learn every value, align-self, and how to center a div horizontally and vertically.

How does justify-content work?

justify-content controls how items are spread along the main axis. In a normal row, that is from left to right. It decides what to do with the free space that the items don't use.

Value	What it does
flex-start	Items are packed at the start (default).
flex-end	Items are packed at the end.
center	Items are packed in the middle.
space-between	The first item is at the start, the last at the end, and the space is shared between them.
space-around	Each item gets equal space on both sides, so the edges get half as much.
space-evenly	All gaps are exactly the same, including the edges.

space-between is perfect for a header with a logo on the left and a menu on the right:

<header class="topbar">
  <strong>CodeCraft</strong>
  <button>Log in</button>
</header>

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

The logo text sits on the far left and the button on the far right, with all the free space between them. If you add a third item, it lands in the middle.

How does align-items work?

align-items controls how items line up along the cross axis. In a row, that is up and down.

Value	What it does
stretch	Items stretch to fill the container's height (default).
flex-start	Items line up at the top.
flex-end	Items line up at the bottom.
center	Items are centered vertically.
baseline	Items line up by the bottom of their first line of text.

baseline is useful when items have different font sizes, like a price with a big number and a small "/month" label next to it. Their text sits on the same line, like words in a sentence.

Common mistake: Using align-items: center and seeing no change. The container is often only as tall as its tallest item, so there is no extra space to move into. Give the container a height or min-height to see the effect.

Tip: Mixing up the two? Remember: justify-content follows the main axis (the direction you set), and align-items goes across it. When you use flex-direction: column, justify-content becomes vertical and align-items becomes horizontal.

How to center a div with flexbox

"How to center a div" is one of the most searched CSS questions. With flexbox it takes three lines on the parent:

<div class="screen">
  <div class="dialog">
    <h2>Welcome back!</h2>
    <p>You are now logged in.</p>
  </div>
</div>

.screen {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #e0e7ff;
}

.dialog {
  background: white;
  padding: 32px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.1);
  text-align: center;
}

The white dialog box sits exactly in the middle of the screen, both horizontally and vertically, and stays there when you resize the window. justify-content: center centers it left to right, align-items: center centers it top to bottom, and min-height: 100vh makes the parent as tall as the screen so there is space to center in.

Note: There is also a short version: place-items: center; together with display: grid; on the parent. It does the same job in two lines. You will learn grid in the next module.

Aligning a single item with align-self

Sometimes one item needs to be different. align-self sets the cross-axis alignment for one item and overrides the container's align-items. It takes the same values: flex-start, flex-end, center, stretch and baseline.

There is no justify-self in flexbox. To push one item away on the main axis, use margin-left: auto (or margin-inline-start: auto). An auto margin eats all the free space on that side.

<div class="chat-row">
  <img src="https://picsum.photos/48" alt="Sam">
  <p class="message">Did you finish the flexbox exercise? It was fun! I finally understand the cross axis.</p>
  <time class="time">10:42</time>
</div>

.chat-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 500px;
  padding: 12px;
  font-family: system-ui, sans-serif;
}

.chat-row img {
  border-radius: 50%;
}

.message {
  margin: 0;
  background: #f3f4f6;
  padding: 10px 14px;
  border-radius: 12px;
}

.time {
  align-self: flex-end;
  margin-left: auto;
  color: #6b7280;
  font-size: 0.8rem;
}

The avatar and the message line up at the top. The time is pushed down to the bottom of the row by align-self: flex-end, and margin-left: auto pushes it to the right edge.

Practice exercise

Create a 400px-tall hero section with a heading, a short paragraph and a button, all stacked and perfectly centered. Then add a small "Scroll down" text that sits at the bottom of the hero.

Hint: use flex-direction: column with justify-content: center and align-items: center. For the "Scroll down" text, margin-top: auto pushes it to the bottom.

Key takeaways

• justify-content spreads items along the main axis; align-items aligns them across it.
• space-between, space-around and space-evenly share free space in different ways.
• To center a div: display: flex; justify-content: center; align-items: center; on the parent.
• align-self changes the cross-axis alignment of one item.
• An auto margin like margin-left: auto pushes an item away along the main axis.