How to Center a div in Html CSS - Day 1

there are two ways to center a content, card, box to center,

1. by using a display grid
2. by using a display flex


1. by using a display grid

we set the proper size to the parent of the current div, box
then we  going to assign to card 

.card{
display: grid;
place-content: center;
}


2. by using a display flex

display flex is another way to arrange div to center, highly this property is used in the development field,

set display flex to card, then card go to set block to flex style, then apply align-item center means arranging item to horizontal center, and then apply justify-content center means item set verticaly center,

.card{
display: flex;
align-item: center;
justify-content: center;
}


100 days Challenge 
01-01-2024
Day 1 

Previous Post Next Post