Center Div vertically and Horizontally within another div

by greatCar

HTML

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

CSS

.outer {
  display: flex;               /* Enables Flexbox layout */
  justify-content: center;     /* Horizontal centering */
  align-items: center;         /* Vertical centering */
  height: 50vh;           /* Set height to viewport for demonstratio*/ width: 50vh;
  border-style: solid;
  border-width: 5px;
 border-color: red;  

  background-color: yellow;   /* Optional styling */
}

.inner {
  width: 100px;                /* Example width */
  height: 100px;               /* Example height */
  background-color: #3498db;   /* Optional styling */
  color: white;                /* Optional styling */
  text-align: center;          /* Centers text inside the div horizontally */
  line-height: 100px;          /* Centers text inside vertically (only for single-line text) */
}