JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="main"><img src="http://placehold.it/300x300" alt="">  </div>
</div>

SCSS

html, body {
  height: 100%;
  min-height: 100%;
  margin:0;
}
.wrapper {
  height: 100%;
  position: relative;

  .main {
     margin-top: -157px;
     margin-left: -157px;
     position: absolute;
     top: 50%;
     left: 50%;
     width: 314px;
     height: 314px;
     line-height: 314px;
     background: #000;
     border-radius: 50%;
     text-align: center;

     img {
       vertical-align: middle;
     }
  }
}