---
title: "How to do center h1 in the middle of the screen?"  
description: "How to do center h1 in the middle of the screen?"  
author: "Revati S Misra"  
published: 2023-04-24  
updated: 2023-04-25  
canonical: https://www.mindstick.com/forum/157999/how-to-do-center-h1-in-the-middle-of-the-screen  
category: "html"  
tags: ["html", "css", "css position"]  
reading_time: 1 minute  

---

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

How to do center h1 in the middle of the [screen](https://www.mindstick.com/forum/33644/loading-screen-during-ajax-call)?

## Replies

### Reply by Aryan Kumar

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:

```html
<h1>Heading</h1>
```

CSS:

```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.


---

Original Source: https://www.mindstick.com/forum/157999/how-to-do-center-h1-in-the-middle-of-the-screen

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.