CSS How can I make this height responsive?

Question

 .wrapper { margin: 7%; height: 79vh; background-color: green; background-size: 300px; }

 <section class="wrapper"> <h1>TEST</h1> </section>

As you can see it somewhat responsive but when I close the window to below 1200px the top will have more white space then the bottom, how can I fix this?

Also I used vh but tbh it's a bit of a dirty to way to position. If I had no height it will only show the first <h1> any other way around that?

Answer 1

Is this what you have in mind.?

 .wrapper { position:absolute; top:50%; left:50%; height:60%; width:60%; background-color: green; transform:translate(-50%,-50%); }

 <section class="wrapper"> <h1>TEST</h1> </section>