Center div NO FLEX vertically and horizontally within another div

by greatCar

HTML

<div class="outer">
  <div class="inner">Centered Content</div>
</div>

CSS

.outer {
  position: relative;
  height: 50vh;
  width: 50vh;
  background-color: #f0f0f0; /* Optional */
    border-style: solid;
  border-width: 5px;
 border-color: red;  
}

.inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Shifts the element back by half its own dimensions */
  width: 100px;
  height: 100px;
  background-color: #3498db;
  color: white;
  text-align: center;
  line-height: 100px;
}