<div class='box'></div>
<style>
.box {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 200px;
height: 200px;
background: olivedrab;
}
</style>
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
background: rebeccapurple;
}
.box {
position: absolute
top: 35%;
left: 45%;
margin-top: -25px;
margin-left: -50px;
width: 200px;
height: 200px;
background: red;
}
body{
display: flex;
justify-content: center;
align-items: center;
}
<script>
let HTML = document.documentElement, winW = HTML.clientWidth, winH =
HTML.clientHeight, boxW = box.offsetWidth, boxH = box.offsetHeight;
box.style.position = "absolute"; box.style.left = (winW - boxW) / 2 + "px";
box.style.top = (winH - boxH) / 2 + "px";
</script>