Center Div with aspect Ratio - html

Question

I need to Center a Div in the html viewport. It should be centered both, vertically and horizontally. But the Div should keep its aspect ratio (4/3) and have a minimum margin of 10px.
I made a Javascript:
function resizeWindow() {
var wHeight = $(document).height() - 20;
var wWidth = $(document).width() - 20;
var gameStage = $("#gameStage");
if ((wWidth / 4) * 3 <= wHeight) {
gameStage.css("width", wWidth + "px");
gameStage.css("height", ((wWidth / 4) * 3) + "px");
gameStage.css("top", (wHeight - ((wWidth / 4) * 3)) / 2 + 9 + "px");
gameStage.css("left", "10px");
} else {
gameStage.css("height", wHeight + "px");
gameStage.css("width", ((wHeight / 3) * 4) + "px");
gameStage.css("left", (wWidth - ((wHeight / 3) * 4)) / 2 + 9 + "px");
gameStage.css("top", "10px");
}
}
https://jsfiddle.net/3sw06kvb/
But User, who disabled Javascript will not be able to use my website. And a solution with HTML/CSS should be faster(?).
My first Idea is to make a wrapper with
position: fixed
top, left, bottom, right = 20px;.
But my problem is making a div centering vertically and horizontally while keeping its aspect ratio.
https://jsfiddle.net/xep2mf62/

Answer 1

You can try the following in the CSS.
The new units in CSS3 vh and vw allows you to set the height depending on the size of the viewport. height:100vh will give the element a height that is equal to the height of the browser window.
***1vw = 1% of viewport width
1vh = 1% of viewport height***
.wrapper {
position: relative;
width:100%;
height:100vh;
}
.childdivision {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height:50vw;
width:90vw;
border:2px solid #444;
}
<div class="wrapper">
<div class="childdivision">
</div>
</div>

Answer 2

Still JS, but simpler
window.onresize = function() {
resize();
};
function resize() {
var wrapper = document.querySelector(".wrapper");
var wrapperwidth = 1920;
var wrapperheight = 1080;
var vw = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var vh = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
var ratio = Math.min(vw / wrapperwidth, vh / wrapperheight);
wrapper.style.transform = `translate(-50%, -50%) scale(${ratio})`;
}
resize();
.wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 1919px;
height: 1079px;
overflow: hidden;
background-color: red;
}
/* demo text (smiley face) */
.wrapper::after {
content: ":)";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 200px;
font-family: "Roboto", 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
<div class="wrapper"></div>