<div class="box"></div>
* {
padding: 0;
margin: 0;
}
html,
body {
width: 100%;
height: 100%;
}
body {
position: relative;
}
.box {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: red;
box-sizing: border-box;
width: 50%;
padding-bottom: 50%;
height: 0;
margin: auto;
}