Aligning a div to the center of its parent div might sound simple to many of us, but believe me, its a nightmare to so many people. So, I thought of writing an article to show how it is done. There are many ways to do it, but I will show you the top three ways.
Let’s get started. Let us suppose we have two divs — parent and child.
Let us assign some height, width and color to these divs.
After applying these styles, our end result will look something like this
Our job is align the yellow box at the center (both vertically and horizontally) of the violet box.
Let us try this in three different ways :-
Using Absolute positioning
Using Flexbox
Using Grid
All the above three ways positions the child div at the center of the parent div which looks like this :-
Yeah, it’s that simple.
I hope this won’t be a nightmare now. Thank you for reading this article. Do not forget to give it a clap.
