vertical centre modal with aspect 16:9 - html

Question

I have a modal popup that I have an aspect ratio of 16:9.
I want to vertical centre the blue popup on the screen and still always maintain the aspect ratio.
<div class="modal">
<div class="parent">
<div class="child">
<div>Aspect is kept when resizing</div>
</div>
</div>
</div>
css
.modal {
width: 100%;
height: 100%;
background: #333;
opacity: 0.85;
position: absolute;
left: 0;
top: 0;
}
.parent {
position: relative;
width: 80%;
margin-left: 10%;
}
.child {
position: relative;
padding-bottom: calc(100% * 9 / 16);
}
.child > div {
border-radius: 5px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: blue;
color: white;
font-size: 24px;
text-align: center;
}
This is a demo of what I have. DEMO

Answer 1

Here is a one div solution. I do not like to use transform to get vertical center as you can get blurry text at odd height values.
https://jsfiddle.net/nqL10ezp/2/
.modal {
position: absolute;
height: 0px;
width: 80%;
padding-bottom: calc(100% * 9 / 16);
background-color: #F00;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
}

Answer 2

.parent {
position: absolute; /* instead of relative */
top:50%; /* push to 50% top */
transform: translateY(-50%); /* bring back at -50% own height */
.parent {
position: absolute; /* instead of relative */
top:50%; /* push to 50% top */
transform: translateY(-50%); /* bring back at -50% own height */
width: 80%;
margin-left: 10%;
}
.child {
position: relative;
padding-bottom: calc(100% * 9 / 16);
}
.child > div {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: blue;
color: white;
font-size: 24px;
text-align: center;
}
<div class="parent">
<div class="child">
<div>Aspect is kept when resizing</div>
</div>
</div>