β
For this, let's consider the following Image which is inside a div tag and the parent element of this div tag is the header tag.
So lets now look at all the ways we can center the div in CSS!π
So lets now look at all the ways we can center the div in CSS!π
1) Traditional Way:
For the parent element,
Set the position to 'relative' and height to '100vh'.
For the child element,
Set top, and left to '50%' and transform to 'translate(-50%,-50%)'
β And Done... Your Child Div is now set to Center!
For the parent element,
Set the position to 'relative' and height to '100vh'.
For the child element,
Set top, and left to '50%' and transform to 'translate(-50%,-50%)'
β And Done... Your Child Div is now set to Center!
2) Using Flexbox:
β Just add the following properties to the parent element and the child div tag will get centered automatically!
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
β Just add the following properties to the parent element and the child div tag will get centered automatically!
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
3) Using CSS Grid
β This is the Shortest and easiest way to center a div tag! β
Just add the following 3 lines to the parent element and the child div tag will get centered automatically!
height: 100vh;
display: grid;
place-items: center center;
β This is the Shortest and easiest way to center a div tag! β
Just add the following 3 lines to the parent element and the child div tag will get centered automatically!
height: 100vh;
display: grid;
place-items: center center;
Great, now you know all the ways to center a div tag.π
Let me know if you know any other ways to center a div tag down below π or let me know if you have any questions!
And if you liked the thread, then consider sharing... It means a lot to me! β€
Let me know if you know any other ways to center a div tag down below π or let me know if you have any questions!
And if you liked the thread, then consider sharing... It means a lot to me! β€
β’ β’ β’
Missing some Tweet in this thread? You can try to
force a refresh
γ
