Why is the Content not aligned in the middle? - html

Question

The Code attached consists of an animation CSS box with a <p>. It's working but the problem is that, why is it not vertical aligned? I will need to use flex function: "align-items = center" to make it aligned.
.LoaderBox {
width: 100%;
border: 1px solid rgba(255, 0, 0, 1.00);
display: flex;
justify-content: center;
}
.LoaderBox>p {
color: rgba(106, 106, 106, 1.00);
font-size: 15px;
margin-left: 20px;
display: block;
}
.LoaderBox_spinner {
width: 20px;
height: 20px;
background-color: #333;
-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
animation: sk-rotateplane 1.2s infinite ease-in-out;
display: block;
}
#-webkit-keyframes sk-rotateplane {
0% {
-webkit-transform: perspective(120px)
}
50% {
-webkit-transform: perspective(120px) rotateY(180deg)
}
100% {
-webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
}
}
#keyframes sk-rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
}
50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
}
100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
<div class="LoaderBox">
<div class="LoaderBox_spinner"></div>
<p>Verifying</p>
</div>

Answer 1

Just add align-items: center to your flex-container .LoaderBox.
By default all items are stretched (align-items: stretch).
p has equal vertical margins by default (margin-top and margin-bottom), and div doesn't. So in this case p determines flex-container's height. And also looks like it's centered vertically.
Demo:
.LoaderBox {
width: 100%;
border: 1px solid rgba(255, 0, 0, 1.00);
display: flex;
align-items: center; /* new */
justify-content: center;
}
.LoaderBox>p {
color: rgba(106, 106, 106, 1.00);
font-size: 15px;
margin-left: 20px;
display: block;
}
.LoaderBox_spinner {
width: 20px;
height: 20px;
background-color: #333;
-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
animation: sk-rotateplane 1.2s infinite ease-in-out;
display: block;
}
#-webkit-keyframes sk-rotateplane {
0% {
-webkit-transform: perspective(120px)
}
50% {
-webkit-transform: perspective(120px) rotateY(180deg)
}
100% {
-webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
}
}
#keyframes sk-rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
}
50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
}
100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
<div class="LoaderBox">
<div class="LoaderBox_spinner"></div>
<p>Verifying</p>
</div>

Answer 2

.LoaderBox {
width: 100%;
border: 1px solid rgba(255, 0, 0, 1.00);
display: flex;
justify-content: center;
padding:20px;
box-sizing:border-box;
}
.LoaderBox>p {
color: rgba(106, 106, 106, 1.00);
font-size: 15px;
display: block;
padding:0px;
margin:0px;
margin-left:20px;
}
.LoaderBox_spinner {
width: 20px;
height: 20px;
background-color: #333;
-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
animation: sk-rotateplane 1.2s infinite ease-in-out;
display: block;
float:left;
}
#-webkit-keyframes sk-rotateplane {
0% {
-webkit-transform: perspective(120px)
}
50% {
-webkit-transform: perspective(120px) rotateY(180deg)
}
100% {
-webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
}
}
#keyframes sk-rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
}
50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
}
100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
p{ float:left;}
<div class="LoaderBox">
<div class="LoaderBox_spinner"></div>
<p>Verifying</p>
</div>