6 ways to center a div
Tags: css, webdev, tutorial, beginners
Published: 2022-01-20 05:46:04

Yeah, I know we all have struggled with this situation. We want to center a `div` or `child` inside the parent element, but sometimes it won't work or it's hard to do. So now let me introduce to you 6 ways by which you can center a `div` mostly in every situation.

### Problem

We have 2 divs `parent` and `child` and we need to center `child` with respect to the `parent`.

```html
<div class="parent">  
	<div class="child"></div>  
</div>
```


<figure>
<img src="https://i.imgur.com/ydjQ8nQ.png" style="width:100%" /><figcaption align = "center">Goal - It should look like this</figcaption>
</figure>

Now we know what we want to achieve. So let's see what are the possible solutions for this problem.

## 1. Using Flexbox

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure.

Apply the following properties to  `.parent`  will center `.child`  horizontally and vertically.

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

{% codepen https://codepen.io/j471n/pen/ZEXpVYv %}

[![codepen](https://imgur.com/MNtTdVp.png)](https://codepen.io/j471n/pen/ZEXpVYv)

## 2. Using Position

The  `position`  property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky). We only need relative and absolute.

Apply following properties to `.parent` and `.child`  will center  `.child`  horizontally and vertically.

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

{% codepen https://codepen.io/j471n/pen/gOGwZpp %}

[![codepen](https://imgur.com/MNtTdVp.png)](https://codepen.io/j471n/pen/gOGwZpp)


## 3. Using CSS grid

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns. we can center the `child` element with this as well.

Apply following properties to  `.parent`  will center  `.child`  horizontally and vertically.

```css
.parent {  
	display: grid;  
	justify-content: center; /* Horizontal */  
	align-content: center; /* Vertical */  
}
```

{% codepen https://codepen.io/j471n/pen/QWqKzjp %}

[![codepen](https://imgur.com/MNtTdVp.png)](https://codepen.io/j471n/pen/QWqKzjp)


Also there's one other way to use the Grid you can apply the following properties to `.parent`.

```css
/* Another Approach */
.parent {  
	display: grid;  
	place-items: center;  
}
```

{% codepen https://codepen.io/j471n/pen/oNGzJbO %}

[![codepen](https://imgur.com/MNtTdVp.png)](https://codepen.io/j471n/pen/oNGzJbO)



## 4. Using  `margin:  auto`  on a  `flex`  item

Flexbox introduced a pretty awesome behavior for `auto` margins. Now, it not only horizontally centers an element as it did in block layouts, but it also centers it in the vertical axis.

Apply following properties to `.parent` will center `.child`  horizontally and vertically.

```css
.parent{ 
	display:flex; 
}  

.child { 
	margin:auto;  
}
```

{% codepen https://codepen.io/j471n/pen/zYEKyKJ %}

[![codepen](https://imgur.com/MNtTdVp.png)](https://codepen.io/j471n/pen/zYEKyKJ)


## 5. Pseudo-elements on a  `flex`  container

Not the most practical approach in the world, but we can also use flexible, empty pseudo-elements to push an element to the center.

Apply following properties to  `.parent`  will center  `.child`  horizontally and vertically.

```css
.parent { 
	display: flex; 
	flex-direction: column;  
}  
.parent::before, 
.parent::after { 
	content:  ""; 
	flex:  1;  
}  
.child {  
	/* ...other CSS */ 
	margin: 0 auto;  
}
```

{% codepen https://codepen.io/j471n/pen/RwLGEKN %}

[![codepen](https://imgur.com/MNtTdVp.png)](https://codepen.io/j471n/pen/RwLGEKN)



## 6.  `margin:  auto`  on a  `grid`  item

Similarly to Flexbox, applying `margin:`  `auto` on a `grid` item centers it on both axes.

```css
.parent { 
	display: grid;  
}  
.child { 
	margin:  auto;  
}
```

{% codepen https://codepen.io/j471n/pen/ExwgGZd %}

[![codepen](https://imgur.com/MNtTdVp.png)](https://codepen.io/j471n/pen/ExwgGZd)



### Conclusion
These are not the only solution or the ways to center a child. There are many other ways to achieve the same thing, But I know only these so I shared them with you. If you have any other way, then feel free to drop your thoughts.

> You can now extend your support by buying me a Coffee.😊👇

<a href="https://www.buymeacoffee.com/j471n"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" loading="lazy" width="545" height="153"></a>



#### Also Read

- [Curved Timeline in CSS](https://dev.to/j471n/curved-css-timeline-5ab3)
- [Image Slider with Vanila JS](https://dev.to/j471n/image-slider-with-vanila-js-22bf)
- [Typing Effect by using CSS ](https://dev.to/j471n/typing-effect-by-using-css-50p)