CODEWITHSUNDEEP
htmlcssflexbox
Mark Boulder
Mark Boulder

Reputation: 14307

Unable to center item vertically with flexbox

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><a href="https://css-tricks.com/centering-css-complete-guide/#both-flexbox">centering-css-complete-guide/#both-flexbox</a>
  <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

Upvotes: 1

Views: 172

Answers (2)

Praveen Puglia
Praveen Puglia

Reputation: 5631

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.

Upvotes: 0

dippas
dippas

Reputation: 60573

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>

Upvotes: 2

Related Questions