Align-content center not working, but align-self center working

Question

Recently I've been learning more about flexbox, and I just stumbled across some unexpected behavior.

I have a div, with a header element inside of it:

<div>
    <h2> Hello </h2>
</div>

The div has

{
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
}

I'm trying to center my header horizontally (in the cross-axis), and my understanding is that align-content: center would do that.

However, it only works if I apply align-self: center to the header.

Any idea what might be causing this behavior? I thought align-content on the flex item was equivalent to align-self on each of the children. Why is it only working if I specify align-self?

You may want to try `align-items` – Gerard Jun 20 '22 at 05:49 — Gerard, Jun 20 '22 at 05:49

score 1 · Accepted Answer · answered Jun 20 '22 at 05:52

1

No need to apply the property to the header , Just include align-items: center; instead of align-content:center to the CSS and it will work perfectly.

answered Jun 20 '22 at 05:52

Basit Mir

97
5

Ah, I can't believe I mixed up `align-items` and `align-content`. Thanks! – Nathan Jun 20 '22 at 06:01
1

I understand, CSS can be frustrating :D – Basit Mir Jun 20 '22 at 06:10

score 0 · Answer 2 · answered Jun 20 '22 at 05:57

0

Flex examples

official documentation

Try

flex-direction: row;

Or

display: flex;
align-items: center;
justify-content: center

answered Jun 20 '22 at 05:57

Vladislav

476
2
13

Align-content center not working, but align-self center working

2 Answers2