I just checked own my own, using display: grid; it aligns vertically and horizontally (exactly at the center of div). And using display: flex; it does something weird.(like if the flex-direction is row(by default), then it will align center column wise )
Sorry @fidalmathew
, I was wrong. Flex does require at least 2 properties set to align any number of items both vertically and horizontally and by default it will make a row of multiple items. Grid requires only 1 property. With 1 element to place both place-items and place-content do the same thing. With multiple items Grid will make a column, but it's place-content that does better job overall than place-items:
And did you know you don't need Grid for that? This works just the same:
and since
display: flex;has wider support thandisplay: grid;then I would stick with Flex. Use Grid when you actually need it!I just checked own my own, using display: grid; it aligns vertically and horizontally (exactly at the center of div). And using display: flex; it does something weird.(like if the flex-direction is row(by default), then it will align center column wise )
Try it out :) , you will understand better.
Flex also aligns vertically and horizontally :)
🤔
Sorry @fidalmathew , I was wrong. Flex does require at least 2 properties set to align any number of items both vertically and horizontally and by default it will make a row of multiple items. Grid requires only 1 property. With 1 element to place both
place-itemsandplace-contentdo the same thing. With multiple items Grid will make a column, but it'splace-contentthat does better job overall thanplace-items:No need to be sorry :), it was just your point. Thanks for sharing about "place content: center", got to learn something new. 😄