Ways To Center a div
Tags: webdev, css
Published: 2023-02-06 11:29:36

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

{% codepen https://codepen.io/tejaswankalluri/pen/oNMVJvL %}

## 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%);` .

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

### 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";
}
```

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

### 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%);
}
```

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

### 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;
}
```

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

## Centering Horizontal and Vertical

### Through Postion 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 {
  postition: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
```
{% codepen https://codepen.io/tejaswankalluri/pen/poZYQxO %}


### 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;
}
```
{% codepen https://codepen.io/tejaswankalluri/pen/xxJBQob %}


### 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;
}
```

{% codepen https://codepen.io/tejaswankalluri/pen/xxJBQob %}

## 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)