Search code examples
cssflexboxcentering

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

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?

Solution

  • 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.