CSS Flexbox centering: justify-content and align-items follow different axes

You set justify-content: center to center a menu, but its vertical position does not change. Adding align-items moves it. The two properties are working on different axes.

Which direction does each Flexbox property align?

Flexbox places children inside a parent with display: flex. With flex-direction: row, the main axis is horizontal and the cross axis is vertical. justify-content aligns along the main axis; align-items aligns along the cross axis. Thus, in a default row, horizontal centering uses justify-content: center, while vertical centering uses align-items: center.

Switch to flex-direction: column, and the axis directions switch too. The property names stay the same, but justify-content now works vertically. Read the main-axis and cross-axis labels in the diagram together with the property names.

In a row, justify-content follows the horizontal main axis and align-items follows the vertical cross axis. In a column, those directions reverse.

What changes when the same items use row or column?

Save this HTML and open it in a browser. Both containers center three identical boxes using the same two properties; only the second container changes flex-direction.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Flexbox centering</title>
  <style>
    .demo {
      display: flex;
      width: 320px;
      height: 180px;
      box-sizing: border-box;
      border: 1px solid #2563eb;
      gap: 12px;
      justify-content: center;
      align-items: center;
    }
    .column { flex-direction: column; }
    .item {
      width: 48px;
      height: 32px;
      box-sizing: border-box;
      background: #dbeafe;
    }
  </style>
</head>
<body>
  <div class="demo">
    <div class="item">A</div><div class="item">B</div><div class="item">C</div>
  </div>
  <div class="demo column">
    <div class="item">A</div><div class="item">B</div><div class="item">C</div>
  </div>
</body>
</html>

In the first container, the boxes form a horizontal group in the center. In the second, they stack vertically in the center. The container size and alignment values stay the same; the layout direction changes.

What if centering seems to do nothing?

First confirm display: flex is on the parent, not the child. Then inspect flex-direction. In a column, changing justify-content affects the vertical axis, not the horizontal one.

Also check for free space on that axis. If you remove height: 180px, the parent may shrink to the items' height. In this example with auto height, it can be about 34 pixels including borders around 32-pixel items. align-items: center may work correctly yet have almost no vertical space in which to move them.

Writing direction and wrapping can complicate real layouts. Instead of memorizing row as “always left to right,” use browser developer tools to inspect the parent's axis direction and remaining space.

Key takeaways

justify-content aligns the main axis; align-items aligns the cross axis. The main axis is horizontal for row and vertical for column. If centering is invisible, check the flex parent, axis direction, and available space in that order.