How To Center Elements Vertically in CSS

Aravind — Sun, 19 Jul 2020 04:24:48 +0000

Centering an element vertically in CSS is the hardest thing that every beginners face.
Hard coded heights with absolute positioning is the basic approach to center an element vertically.Though it might work fine,it has a bunch of drawback,when the height of the parent element is not determined.

Using Flexbox
The previous way to center elements works good,but they have some major drawback.They need to have a pre-defined height.Flexbox has made centering elements unbelievably easy.The "align-items" property in Flexbox is what centers all of our elements vertically,and the "justify-content" property is what centers the items horizontally.Flexbox is and incredibly tool that need to be mastered
https://flexboxfroggy.com/ <=Learn flexbox playing this game..

Grid
Just like Flexbox,CSS grid makes centering super easy.Most of the properties in Flexbox and grid are same,the width of children is defined in the parent using the property "grid-template-columns".
The "align items" property is what centers of our elements vertically,and the "justify-content" property centers the items horizontally.If you not familiar with grid it is a powerfull tool to be learnt

https://codepip.com/games/grid-garden/ <= Learn Grid playing this game..

DEV Community: Aravind

How To Center Elements Vertically in CSS