Text centered in a circular component
Try this approach. It uses CSS Grid layout. It requires less code and is easier to maintain.


.circle {
  display: grid;
  place-content: center;
  border: 0.3em solid black;
  border-radius: 50%;
  width: 6em;
  height: 6em;
}

.initials {
  font-size: 300%;
}
&lt;div class="circle"&gt;
  &lt;div class="initials"&gt;DC&lt;/div&gt;
&lt;/div&gt;