In this article, we will show you how to center the H1 element in the middle of the screen. We will share the HTML and CSS along with the demo.
To center an h1
element in the middle of the screen, you can use CSS flexbox
.
Here’s an example:
Sample HTML Code to center align the H1 element
<body>
<h1>My Heading</h1>
</body>
CSS Code to center align the H1 Element
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* Make the body element take up the entire viewport height */
}
h1 {
text-align: center; /* Center the text horizontally within the h1 element */
}
In this example, we set the display
property of the body
element to flex
, which allows us to use the justify-content
and align-items
properties to center the h1
element both horizontally and vertically.
We also set the height
property of the body
element to 100vh
to make it take up the entire viewport height.
Finally, we use the text-align
property to center the text horizontally within the h1
element.
This will center the h1
element in the middle of the screen, both horizontally and vertically.
Demo and Source Code
Here’s the codepen source code and demo
CodePen Link: https://codepen.io/arctutorials/full/dyqLpvj