Centering a div can be tricky at the beginning.
But no worries, It's simple and you can do it in a lot of ways,
Side note: HTML code:
<div class='parent'>
<div class='child'></div>
</div>
- Using flex:
.parent {
display: flex;
align-items: center;
justify-content: center;
}
and whatever the case is your child element is always centered.
- Using grid:
.parent {
display: grid;
align-items: center;
justify-content: center;
}
- Using grid: (you kidding! again!)
.parent {
display: grid;
place-items: center;
}
It's just a shortcut of using grid.
- Involving both elements:
.parent {
display: flex;
}
.parent .child {
margin: auto;
}
or,
.parent {
display: grid;
}
.parent .child {
margin: auto;
}
And there you go. You can now center your element however you want.
See, this Pen as an example reference.
Top comments (1)
i'll probably make this post my wallpaper . thank you so much !