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>
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;
}
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%);
}
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 */
}
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;
}
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;
}
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;
}
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;
}
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.😊👇
Top comments (2)
Thank you very much.
Excellent. Simple and Excellent Work.
You help me so much not to consume my time.
Thank you very much again.
It's always a pleasure when I am useful to someone. Really appreciate you man. Happy hacking ✨