---
title: "How to center an element horizontally and vertically"  
description: "How to center an element horizontally and vertically"  
author: "Revati S Misra"  
published: 2023-04-24  
updated: 2023-04-25  
canonical: https://www.mindstick.com/forum/157997/how-to-center-an-element-horizontally-and-vertically  
category: "html"  
tags: ["html", "css", "css position"]  
reading_time: 2 minutes  

---

# How to center an element horizontally and vertically

How to [center an element horizontally](https://www.mindstick.com/interview/33975/how-can-you-center-an-element-horizontally-in-css) and vertically

## Replies

### Reply by Aryan Kumar

To center an element both [horizontally and vertically](https://www.mindstick.com/forum/158678/how-can-center-align-an-element-both-horizontally-and-vertically-using-css), you can use CSS styling. Here's an example of how to do it:

HTML code:

```html
<div>Centered Element</div>
```

CSS Code:

```css
div {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}
```

In this example, we're using the **div** element, but you can replace it with any other element you want to center. We're setting the **position** property to **absolute** to take the element out of the normal flow of the page. The **top: 50%;** and **left: 50%;** properties will position the top-left corner of the element at the center of its container.

Finally, we're using the **transform** property to shift the element up and to the left by half of its own width and height, effectively centering it both horizontally and vertically. The **translate(-50%, -50%)** value of the **transform** property does this by shifting the element 50% of its width to the left and 50% of its height up.

Note that this method assumes that the 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/157997/how-to-center-an-element-horizontally-and-vertically

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