When having a child element with width and height in px/vw/vh units and margin set to auto, then the element completely ignores the margin and sets the width and height to parent size.
Test the html and see the difference.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.left_screen_wrapper {width:50%;height:100%;position:absolute;left:0%;border-right:2px dashed #000000;}
.right_screen_wrapper {width:50%;height:100%;position:absolute;left:50%;}
p {text-align: center;margin: 20px auto;}
.wrapper{width: 80%;height: 80%;position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: blue;}
.block_left_top{width: 20vw;height: 20vh;position: absolute;left: 10vw;top: 30vh;background-color: red;}
.block_margin{width: 20vw;height: 20vh;position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: red;}
</style>
</head>
<body>
<div class="left_screen_wrapper">
<p>Positioned with left, top</p>
<div class="wrapper">
<div class="block_left_top"></div>
</div>
</div>
<div class="right_screen_wrapper">
<p>Positioned with margin: auto</p>
<div class="wrapper">
<div class="block_margin"></div>
</div>
</div>
</body>
When having a child element with width and height in px/vw/vh units and margin set to auto, then the element completely ignores the margin and sets the width and height to parent size.
Test the html and see the difference.