Watch Tutorial
Don't miss the amazing video we've embedded in this post! Click the play button to be inspired
1. Using flexbox
.parent {
display: flex;
justify-content: center;
align-items: center;
}
2. Using grid
.parent {
display: grid;
place-content: center;
}
3. Using Position
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
4. Using Flex & Margin
.parent {
display: flex;
}
.child {
margin: auto;
}
5. Using Grid & Margin
.parent {
display: grid;
}
.child {
margin: auto;
}
Latest Post
Thanks for Reading ❤️! Check my website Demo coding for updates about my latest CSS Animation, CSS Tools, and some cool web dev tips. Let's be friends!
Don't forget to subscribe to our channel : Demo code
Top comments (0)