How to do center h1 in the middle of the screen?

Question

Aryan Kumar · Answer

o center an h1 element in the middle of the screen, you can use CSS styling. Here's an example of how to do it:

<h1>Heading</h1>

CSS:

h1 {
 text-align: center;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

The text-align: center; property will center the text of the h1 element horizontally within its container. The position: absolute; property will position the h1 element relative to its nearest positioned ancestor. The top: 50%; and left: 50%; properties will position the top-left corner of the h1 element at the center of its container. Finally, the transform: translate(-50%, -50%); property will shift the h1 element up and to the left by half of its own width and height, effectively centering it both horizontally and vertically.

Note that this method assumes that the h1 element has no other content or padding within it, and that its container has position: relative; set. If these assumptions don't hold, you may need to adjust the CSS code accordingly.

forum

How to do center h1 in the middle of the screen?

Can you answer this question?

1 Answers