Why isn't flex box centering my div properly - html

Question

I was watching a video that used align items and justify center to put a div on top of the page
why is it only at the top not at in the middle of the page?
.wrapper {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
padding: 0 10%;
overflow: hidden;
height: 100%;
}
<div class="wrapper">
<div class="cols cols0">
<span class="topline">Hello</span>
<h1> I'm <span class="multiText">Coder</span></h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus, sed nam quia autem voluptatum quae omnis maiores dolorem hic dolores sint quisquam a. Eaque expedita laborum debitis, dolores fugit assumenda!</p>
<div class="btns"> <button> download CV</button>
<button> hire me</button>
</div>
</div>
<div class="cols cols0"></div>
</div>

Answer 1

The issue is that height: 100% means 100% of the parent's height. The parent's height however is by default set to fit-content means the height is undefined. 100% of undefined is also undefined!
In order to vertically center content within an element, the height of the element must be higher than the content itself!
The simple solution is to give it a min-height of 100vh (the height of your content frame within the browser.
To remove the default vertical scrollbar you have to reset the default body margin and set the box-sizing of the element to border-box as otherwise, the padding will add height on top.
/* need to add this body reset + min-height */
body {
margin: 0;
}
.wrapper {
min-height: 100vh;
box-sizing: border-box;
}
/* original css */
.wrapper {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
padding: 0 10%;
overflow: hidden;
height: 100%;
}
<div class="wrapper">
<div class="cols cols0">
<span class="topline">Hello</span>
<h1> I'm <span class="multiText">Coder</span></h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus, sed nam quia autem voluptatum quae omnis maiores dolorem hic dolores sint quisquam a. Eaque expedita laborum debitis, dolores fugit assumenda!</p>
<div class="btns"> <button> download CV</button>
<button> hire me</button>
</div>
</div>
<div class="cols cols0"></div>
</div>

Answer 2

The .wrapper div is not spread over the full height.
You can set its height to 100vh

Answer 3

try to remove second block
<div class="cols cols0"></div>