Vertically and horizontally align content whilst still being responsive - html

Question

I currently have a simple one page website which displays a logo, 4 short lines of text and 2 buttons which are side by side. I'm using Bootstrap 4.
I have already tried many solutions posted on stack overflow but haven't found a fix.
I am trying to align all of the content horizontally and vertically whilst still being responsive so it is in the middle of the screen on all devices. Would be good to have no scroll however i'm guessing scroll may be required especially on smaller devices such as iPhone SE so that's ok.
The closest I have got is with the code below. This centers correctly however for example, on iPhone SE the logo and buttons are cut off at the top and bottom of the page rather than resizing like responsive should do.
css:
html, body {
height: 100%;
font-family: Arial, sans-serif !important;
overflow:auto;
}
body {
margin: 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
}
html:
<div class="container">
<div style="padding:15px;" class="row">
<div class="col text-center">
<center>
<img src="assets/img/logo.png" class="logo" />
<br>
<br>
<p style="margin-top:1rem;" class="big">text</p>
<p>text<br>text<br>text</p><p>text<br>text<br>text</p>
<p class="no-margin">PURCHASE TICKET INSTANTLY ONLINE</p>
<p class="big">OR</p>
<p>RESERVE AND PAY ON ENTRY</p>
<br>
<div class="row">
<div class="col-sm-12 text-center">
<a href="purchase">
<button style="background-color: #db0e0e !important;border:none; line-height: 130%;" class="btn btn-danger btn-md center-block">PURCHASE
<br>TICKET ONLINE</button>
</a>
<a href="purchase"><button style="background-color: #ffffff !important;color: #db0e0e !important;border:none; line-height: 130%;" class="btn btn-danger btn-md center-block">RESERVE
<br>PAY ON ENTRY</button></a>
</div>
</div>
</center>
</div>
</div>
</div>

Answer 1

Flex. See my jsfiddle.
The key is to center both axes with nested flex <div>'s one with a flex-direction of column and one of row, both with justify-content: center. The key "gotcha" with flex is that at least one of the first flex div has to have height: 100%, since flex elements' default height are determined by their contents, not their parent height.