Проблема в позиционировании <div>

body { 
  display: flex; 
  width: 100%; 
  height: 100%; 
  min-height: 100vh; 
  align-items: center; 
  justify-content: center; 
  padding: 0; 
  margin: 0; 
  background-color:tomato; 
} 
 
div { 
  width: 50px; 
  height: 50px; 
  background-color: background; 
}

<div></div>

* { 
  padding: 0; 
  margin: 0; 
  box-sizing: border-box; 
} 
 
.wrapper { 
  width: 100%; 
  height: 100vh; 
  background-color: #248cec; 
} 
 
.elem { 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  width: 50px; 
  height: 50px; 
  transform: translate(-50%, -50%); 
  background-color: #9ed535; 
}

<div class="wrapper"> 
  <div class="elem"></div> 
</div>