How to center h6 tag inside flex box

Question

I can't center horizontally a h6 (or any) tag inside a flex div. I think I've tried all the CSS approaches align, justify, etc, but nothing works!

I just want to place a div with 80% of its size and put text inside it, is it supposed to be that hard?

[EDIT] Solved by adding margin 0 auto (do not forgot the auto) in the parent div css.

div {
  display: flex; 
  align-items: center; 
  align-self: center; 
  justify-content: center; 
  width: 80%;
}

#n{border: 1px solid coral}
#y{border: 1px solid green}
h6{border: 1px solid blue}

<div id="n">
  <h6>I won't align >:(</h6>
</div>
<br>
<div style="margin: 0 auto;" id="y">
  <h6>I do align :)</h6>
</div>

Looks pretty [center-aligned](https://jsfiddle.net/p2v8ot0a/1/) to me — Phix, Jan 28 '21 at 02:48
your h6 tag is fine. You just don't have your div center-aligned. — ZuzEL, Jan 28 '21 at 02:53
I meant vertically. I cant even distinguish between those anymore — testing_22, Jan 28 '21 at 03:02

score 2 · Accepted Answer · answered Jan 28 '21 at 04:14

You can check below snippet. I used border property of css & check where is parent div and child h6. After check, Your css code is working fine but if you want parent div should be in center also then you need to add margin: 0 auto; in parent div.

<div style="display: flex; align-items: center; justify-content: center; width: 80%; border: 1px solid red;"><h6 style="border:1px solid blue;">h6 tag --- I am in center</h6></div>

score 1 · Answer 2 · answered Jan 28 '21 at 02:50

That's because parent div container is not centered.

Set margin: auto for the parent div to place it center.

<div style="margin: auto; display: flex; align-items: center; align-self: center; justify-content: center; justify-self: center; width: 80%;">
  <h6>I won't alignnnnnn</h6>
</div>

score 1 · Answer 3 · answered Jan 28 '21 at 02:51

Add margin: 0 auto; to the div:

<div style="display: flex; align-items: center; align-self: center; justify-content: center; justify-self: center; width: 80%; margin: 0 auto;">
    <h6>I am aligneeeeddd</h6>
</div>

Codepen: https://codepen.io/manaskhandelwal1/pen/jOVNwmd

How to center h6 tag inside flex box

3 Answers3