Unable to center item vertically with flexbox - html

Question

I'm trying to center something horizontally and vertically using flexbox as described Here ( click "Both Horizontally and Vertically" => then click "Can you use flexbox?")
.parent_test {
display: flex;
justify-content: center;
align-items: center;
}
.sk-double-bounce {
width: 40px;
height: 40px;
position: relative;
}
.sk-double-bounce .sk-child {
width: 100%;
height: 100%;
border-radius: 20%;
background-color: green;
position: absolute;
top: 0;
left: 0;
-webkit-animation: sk-doubleBounce 2s infinite ease-in-out;
animation: sk-doubleBounce 2s infinite ease-in-out; }
.sk-double-bounce .sk-double-bounce2 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s; }
#-webkit-keyframes sk-doubleBounce {
0%, 100% {
-webkit-transform: scale(0);
transform: scale(0); }
50% {
-webkit-transform: scale(1);
transform: scale(1); } }
#keyframes sk-doubleBounce {
0%, 100% {
-webkit-transform: scale(0);
transform: scale(0); }
50% {
-webkit-transform: scale(1);
transform: scale(1); } }
<h1>centering-css-complete-guide/#both-flexbox
<div class="parent_test">
<div class="sk-double-bounce">
<div class="sk-child sk-double-bounce1"></div>
<div class="sk-child sk-double-bounce2"></div>
</div>
</div>
But why isn't it centering vertically? JSBin

Answer 1

you need to specify a height for parent, in order to make it vertically aligned.
body {
margin: 0
}
.parent_test {
display: flex;
justify-content: center;
align-items: center;
height: 100vh
}
.sk-double-bounce {
width: 40px;
height: 40px;
position: relative;
}
.sk-double-bounce .sk-child {
width: 100%;
height: 100%;
border-radius: 20%;
background-color: green;
position: absolute;
top: 0;
left: 0;
-webkit-animation: sk-doubleBounce 2s infinite ease-in-out;
animation: sk-doubleBounce 2s infinite ease-in-out;
}
.sk-double-bounce .sk-double-bounce2 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
#-webkit-keyframes sk-doubleBounce {
0%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes sk-doubleBounce {
0%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
<div class="parent_test">
<div class="sk-double-bounce">
<div class="sk-child sk-double-bounce1"></div>
<div class="sk-child sk-double-bounce2"></div>
</div>
</div>

Answer 2

If you inspect the output, you'll see .sk-double-bounce is actually centered within .parent_test. The problem is that .parent_test has way lesser height. ( It only takes the amount of height required by it's content plus padding and border values).
You can now understand why the solution by #dippas works. If you want, you could remove the .parent_test wrapper, put flex rules in body, set body's height to 100vh and then put .sk-double-bounce div directly inside body. That would do the same job.