<div class="flex-fix">
  <div class="flex-parent">
    <div class="flex-child">
         <div class="loading-spinner"></div> 
         <div class="loading-logo"></div> 
    </div>
  </div>
</div>

* {
  box-sizing: border-box;
}

.flex-parent {
  display:flex;
  flex-direction:row;
  
}
.flex-child {
  padding:1em;
  min-height: 100vh;
  width: 100%;
  align-items: center;
  display:flex; 
  justify-content: center;
  flex-direction: column;
}

.loading-spinner {
  border-radius: 50%;
  width: 180px;
  height: 180px;
  border: 2px solid rgba(13, 176, 43, .2);
  border-top-color: #0db02b;
  -webkit-animation: rotation .8s infinite cubic-bezier(.6, .3, .3, .6);
  animation: rotation .8s infinite cubic-bezier(.6, .3, .3, .6);
}

@keyframes rotation {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading-logo {
  background: transparent url("https://cityplanneronline.com/site/wp-content/uploads/2017/01/CityPlanner-Glyph-Colour@vector.svg");
  background-size: 95px 95px;
  height: 95px;
  width: 95px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}