Replacing vertical:middle, align:center tabling with a div structure - html

Question

Most of the things I create I need centered, but able to scale if necessary, so I use a table layout to help center content as I've done for years. However, wit the introduction of flex I believe this has been made more efficient ( less html ). I've done some research but haven't gotten to a proper cross-browser solution in the time alloted.
So very simply, I need to replace the following code:
<style>
.app-frame {position:fixed;top:0;left:0;width:100%;height:100%;}
.app-frame td {vertical-align:middle;text-align:center;}
.app-content {display:inline-block;border:1px solid gainsboro;max-width:600px;position:relative;}
</style>
<table class="app-frame">
<tr>
<td>
<div class="app-content">
<!--app-->
<div class="slide" id="slide1">
<h1>Step 1: Name your character.</h1>
<p class=info>You can change this at any time after creation.</p>
<label>Character's Name</label>
<input name="charname" />
</div>
<!--/app-->
</div>
</td>
</tr>
</table>
with a solution that allows me to use divs, like so:
<div class="app-frame">
<div class="app-content"> ... </div>
</div>

Answer 1

These are the settings (for the container element) with which you can center all included elements vertically and horizontally using flex:
.slide {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.slide {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
<div class="app-frame">
<div class="app-content">
<div class="slide" id="slide1">
<h1>Step 1: Name your character.</h1>
<p class=info>You can change this at any time after creation.</p>
<label>Character's Name</label>
<input name="charname" />
</div>
</div>
</div>

Answer 2

This is how to horizontally center a div with css flexbox:
.app-frame{
display:flex;
justify-content:center;
align-items:center;
width:100%
}
<div class="app-frame">
<div class="app-content">Centered DIV</div>
</div>
It's more flexible as you can change your layout without touching the HTML.