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
