Search code examples
htmlcssflexbox

How to vertically align div on page with flexbox

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?

Solution

  • 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>