center everything in a div with flex-center (centre)
i usually add this to my base css styles, as a way to easily center something in the middle of an element.
then you just add this flex-center class and everything will be horizontally and vertically aligned.
HTML
<div class='demo-box flex-center'>Demo Box<br>❤</div>CSS
.demo-box {
text-align:center;
height:200px;
width:200px;
border:2px solid #444;
padding:20px;
}
.flex-center {
display: flex;
align-items: center;
justify-content: center;
transition: all 1s;
}Demo Box
❤
❤