EricC EricC - 2 months ago 9
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>

Comments