<center> tag not working properly

Question

I'm working on a website and I'm using the center tag to center some h3's.

just under my header I'm centering this h3 text like this:

<center><h3> Lijst van jongeren die ouder zijn dan 18 jaar </h3></center>

But than when I refreshing the page its not really centered but its slightly to the right.

Than on the same page in the middle of the page I'm centering another piece of text like this: <center><h3> Lijst van jongeren die jonger zijn dan 18 jaar </h3></center> and this piece of text does get centered properly.

So it seems like every h3 thats under my header is not being centered correctly and I don't know why this happens.

This is a picture of how it looks on my website: https://gyazo.com/9d66a01487df4e19a7909afb4ab428c5

This is css of my html and body:

body{
    background: #F5F5F5 !important;
}
html,body{
    height: 100%;
    font-family: "Arial";
    background: #F5F5F5;
    margin:0px;
    padding:0px;
}

Any kind of help is appreciated, Thx

Answer 1

The use of the <center> tag is now obsolete, I believe most browsers do support it, but it is deprecated, and not recommended in new websites.

Read here:

Mozilla Center Tag

Instead use CSS to center inside the parent tag, for example:

h3 { text-align: center; }

Careful though, this will center every h3 tag on your site, so it might be better to add a class name that corresponds to a CSS class with the text-align: centerattribute

Working Code Pen

Answer 2

h3 is a block element. In fact, the tag is centering properly.

But you can align the text inside the tag.

.centered { text-align: center; }

<h3 class="centered">Hello, there!</h3>

Answer 3

Maybe you should try centering your elements with CSS:

h3{
text-align: center;  
}

Check this