How to vertically align div on page with flexbox

Question

The following is not vertically aligning the div with text in browser tab (it is horizontally aligning correctly):

<div style="height: 100%; display: flex; align-items: center; justify-content: center;">

  <div>
    Some vertical and horizontal aligned text
  </div>

</div>

What is wrong?

Answer 1

The problem is with the height you given to the parent container. The height :100% does not take whole height. change that to 100vh or like that

Here is the updated Demo

.container{
  height: 100vh; 
  display: flex; 
  align-items: center; 
  justify-content: center;
}

<div class="container">
  <div>
    Some vertical and horizontal aligned text
  </div>
</div>

Answer 2

Please try bellow following code

body, html{
  height:100%;
  width:100%;
  padding:0px;
  margin:0px;
}

.demo-wp{
  height: 100%; 
  display: flex; 
  align-items: center; 
  justify-content: center;
  background:green;
}

.inner-div{
  background:gold;
  padding:20px;
}

<div class="demo-wp">

  <div class="inner-div">
    Some vertical and horizontal aligned text
  </div>

</div>

Answer 3

Try this:

<div style="height: 100vh; display: flex; align-items: center; justify-content: center;">
  <div>
    Some vertical and horizontal aligned text
  </div>
</div>

It's because your parent divdoesn't take the full height.

Answer 4

try this

<div style="height: 100%; display: -webkit-flex; display: flex; align-items: center; justify-content: center; background-color: lightgrey;">

  <div>
    Some vertical and horizontal aligned text
  </div>

</div>