How can I make bordered text elements to be in the middle of the page?

Question

I'm confused on how to do this seemingly easy task. I mean to horizontally align the entire element to the center.

The h1 here is what I'm trying to work on
https://code.sololearn.com/WTjDpTAZADH8/?ref=app

Answer 1

Add
margin: 0 auto;
To your h1 element, this trick work for block level elements such as h1, it set equal margin on left and right, and this will push element to center.

Answer 2

Also here are more methods for centering:
https://www.w3schools.com/css/css_align.asp

I mostly use margin or make container display: flex and than center with justify-content: center.

If you need to center img for example what are inline element you need to convert it to block with display: block, than you can use margin trick.