EricC EricC - 9 months ago 36
CSS Question

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?

Answer

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>