# Ways To Center a div

Centering a div in CSS is the confusing part for beginners. Today in this article let's see the ways to center a div.

<iframe height="300" style="width:100%" src="https://codepen.io/tejaswankalluri/embed/oNMVJvL?default-tab=css%2Cresult">
  See the Pen <a href="https://codepen.io/tejaswankalluri/pen/oNMVJvL">
   center a div through grid</a> by tejaswan kalluri (<a href="https://codepen.io/tejaswankalluri">@tejaswankalluri</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

## Types

### Center Horizontal

* Relative and absolute
    
* Flex Box
    
* Margin auto
    

### Center Vertical

* Through Relative and absolute
    
* Through Flex Box
    

### Center horizontal and vertical

* Relative and absolute
    
* Though Flex Box
    
* Through Grid
    

## Center Horizontally

### Through relative and absolute

By using relative and absolute, we can center a div horizontally let's assume that a child div is dependent on a parent div. In this kind of situation, we have to use relative and absolute by providing relative to the parent and absolute to the children.

Relative tells the children div where to start its position. And absolute tells the children to follow the absolute value of the parent.

```css
.parent {
	position: "relative";
}
.child {
	position: "absolute";
	left: "50%";
	transform: translateX(-50%);
}
```

But the left 50% will not center correctly, to avoid we need to use `transform: translateX(-50%);` .

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1675676980951/2a116b36-ff3b-450d-b610-3bc75c33a3de.png align="center")

### Through FlexBox

flexbox is the comfortable way to center a div horizontally. the only thing that the parent div should contain `width` by default div is a block element so, no need for manual width. flexbox contains `justify-content: center` to center horizontally.

```css
.parent{
	display: "flex";
	justify-content: "center";
}
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1675677536541/29421476-b1bd-4551-9c36-4b462e146a29.png align="center")

### Through Margin Auto

Margin auto is the easiest way to center a div horizontally. as the div is a block element in which you don't need to add width manually.

Auto keyword in CSS with push the block to as much it can. so if you can auto on both sides. then the div gets to the center.

Margin auto needs when we don't want to add CSS to parent div.

```css
.child {
    margin-left: auto;
    margin-right: auto;
}

/*2nd way one liner*/
.child {
    /* margin: Yaxis and Xaxis */
    margin: 0 auto;
}
```

## Center Vertically

Similar to centering horizontally.

### Through Position and absolute

It is similar to the previous but we have to use the Y axis in \`transform: translateY(-50%)\`.

```css
.parent {
	position: "relative";
}
.child {
	position: "absolute";
	top: "50%";
	transform: translateY(-50%);
}
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1675678536662/a97804cb-8a93-4a54-9e39-413bc4e1904f.png align="center")

### Through Flex Box

Similar to the previous flexbox but `justify-content: center` only to center horizontally. but to center vertical, we have to use `align-items: center` .

**Important** when you center horizontally height is needed.

```css
.parent {
  height: 100vh;
  display: flex;
  align-items: center;
}
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1675678998888/1bb90163-dfb8-4e41-9f02-f64e323dfcf6.png align="center")

## Centering Horizontal and Vertical

### Through Position and Absolute

Centering both vertically and horizontally we have to use `top` and `left` in the child div. And using `translate` both the x-axis and y-axis.

```css
.parent {
  position: relative;
}

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

<iframe height="300" style="width:100%" src="https://codepen.io/tejaswankalluri/embed/poZYQxO?default-tab=css%2Cresult">
  See the Pen <a href="https://codepen.io/tejaswankalluri/pen/poZYQxO">
  Center A div through relative and absolute</a> by tejaswan kalluri (<a href="https://codepen.io/tejaswankalluri">@tejaswankalluri</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

### Through FlexBox 💖

Similar to the previous one but we have to use both `justify-content` and `align-item` for centering both horizontally and vertically.

```css
.parent {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
```

<iframe height="300" style="width:100%" src="https://codepen.io/tejaswankalluri/embed/xxJBQob?default-tab=css%2Cresult">
  See the Pen <a href="https://codepen.io/tejaswankalluri/pen/xxJBQob">
  Center A div through flex</a> by tejaswan kalluri (<a href="https://codepen.io/tejaswankalluri">@tejaswankalluri</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

### Through Grid 🔥(easy)

If you want to center a div with **one line of code 🤯. the** grid has a one-line solution to flexbox by using `place-items: center` .

`place-items: center` will center both horizontally and vertically.

```css
.parent {
  height: 100vh;
  display: grid;
  place-items: center;
}
```

<iframe height="300" style="width:100%" src="https://codepen.io/tejaswankalluri/embed/oNMVJvL?default-tab=css%2Cresult">
  See the Pen <a href="https://codepen.io/tejaswankalluri/pen/oNMVJvL">
   center a div through grid</a> by tejaswan kalluri (<a href="https://codepen.io/tejaswankalluri">@tejaswankalluri</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

## References 🧑‍💻

* [Centering in CSS: A Complete Guide | CSS-Tricks - CSS-Tricks](https://css-tricks.com/centering-css-complete-guide/)
    
* [11 Ways to Center Div or Text in Div in CSS (](https://blog.hubspot.com/website/center-div-css)[hubspot.com](http://hubspot.com)[)](https://blog.hubspot.com/website/center-div-css)
    

## Outro ❤️

I am making this series of content to help other aspiring developers who want to start their career in Web Development. It takes a lot of effort to make the series, If you really like my work [**Buy me a Coffee**](https://blog.tejaswan.me/sponsor) and Follow me on Twitter [**tejaswan1**](https://twitter.com/tejaswan1) and Instagram [Tech Shark (@techshark\_web)](https://www.instagram.com/techshark_web/)