WebGlow Knowledge Centre

Flexbox should make centering content easy — but it often trips up developers.

You try justify-content: center; align-items: center; and… nothing moves. Most of the time, the issue is small mistakes in container setup, element size, or missing properties. This guide walks through 8 real-world fixes with copy-pasteable examples.

1️⃣ Check the Flex Container

The Problem: Parent element missing display: flex;

.container {
  /* missing display: flex */
  justify-content: center;
  align-items: center;
}
        

Fix:

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

2️⃣ Ensure Container Has Height

Vertical centering fails if the container has no height.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px; /* must have height */
}
        

3️⃣ Align Items vs Justify Content

- justify-content → horizontal alignment
- align-items → vertical alignment (single line)
Common mistake: confusing the two.

4️⃣ Flex Direction Matters

Flex direction changes which axis each property aligns:

.container {
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertical now */
  align-items: center;     /* horizontal now */
  height: 300px;
}
        

5️⃣ Min-Height vs Height

Container may collapse if content is small — use min-height:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
        

6️⃣ Inline vs Block Elements

Flexbox aligns children of the container. Inline elements inside may behave unexpectedly — use display: block or inline-block.

7️⃣ Nested Flex Containers

Sometimes your element is nested in a div that blocks alignment. Apply flex on the direct parent.

8️⃣ Using Margin Auto

For horizontal centering, margin: auto; works on the child:

.item {
  margin: auto;
}
        

Full Working Example

HTML

CSS

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background-color: #f0f0f0;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
        

Extra Tips

• Check flex-wrap — wrapping affects alignment
• Inspect computed styles in DevTools
• align-self overrides align-items for a child

Download Templates

Test all these flexbox fixes in our free HTML templates:

Download Free HTML Templates