'How to center h6 tag inside flex box [duplicate]

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>
htmlcssalignment


Solution 1:[1]

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>

Solution 2:[2]

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>

Solution 3:[3]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Raeesh Alam
Solution 2 wangdev87
Solution 3 Manas Khandelwal

Related Questions