DEV Community

Cover image for 6 ways to center a div
Jatin Sharma
Jatin Sharma

Posted on

6 ways to center a div

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.

<div class="parent">  
    <div class="child"></div>  
</div>
Enter fullscreen mode Exit fullscreen mode

Goal - It should look like this

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.

.parent {  
    display: flex;  
    justify-content: center;  
    align-items: center;  
}
Enter fullscreen mode Exit fullscreen mode

codepen

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.

.parent {  
    position: relative;  
}
.child {  
    position: absolute;  
    top: 50%;  
    left: 50%;  
    transform: translate(-50%, -50%);  
}
Enter fullscreen mode Exit fullscreen mode

codepen

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.

.parent {  
    display: grid;  
    justify-content: center; /* Horizontal */  
    align-content: center; /* Vertical */  
}
Enter fullscreen mode Exit fullscreen mode

codepen

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

/* Another Approach */
.parent {  
    display: grid;  
    place-items: center;  
}
Enter fullscreen mode Exit fullscreen mode

codepen

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.

.parent{ 
    display:flex; 
}  

.child { 
    margin:auto;  
}
Enter fullscreen mode Exit fullscreen mode

codepen

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.

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

codepen

6. margin: auto on a grid item

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

.parent { 
    display: grid;  
}  
.child { 
    margin:  auto;  
}
Enter fullscreen mode Exit fullscreen mode

codepen

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.😊👇

Buy Me A Coffee

Also Read

Discussion (0)