Text centered in a circular component I have surrounded my initials with a circle. This is intended to be a re-usable component in a responsive layout. (When it is re-used the text will always be two letters, and the font won't change. It behaves sensibly when the browser zooms in and out, but I haven't yet considered if a different component size is needed for very small screens.)

I tried two approaches, firstly with flex layout, and secondly using the box model, and I'm not sure which I prefer.


.flex-profile-icon {
  display: flex;
  flex: 0 0 auto;
  width: 6em;
  height: 6em;
  border-style: solid;
  border-radius: 50%;
  justify-content: center;
}

.flex-profile-icon-text {
  align-self: center; /* center on cross-axis, i.e. vertically */
  font-size: 300%;
}

.trad-profile-icon {
  width: 6em;
  border-style: solid;
  border-radius: 50%;
  line-height: 0;
  position: relative;
}
.trad-profile-icon:after {
  content: "";
  display: block;
  padding-bottom: 100%; /* hack for equal height to width */
}
.trad-profile-icon-text {
  position: absolute;
  bottom: 50%;
  width: 100%;
  text-align: center;
  font-size: 300%;
}

/*
Copyright 2019-2020 by dcorking and Code Boxx
*/
&lt;p&gt;
  Aim is for the text to be centered in the circle
&lt;/p&gt;

&lt;h2&gt;Flexbox layout&lt;/h2&gt;
&lt;div class="flex-profile-icon"&gt;
  &lt;a class="flex-profile-icon-text"&gt;
    DC
  &lt;/a&gt;
&lt;/div&gt;

&lt;h2&gt;Traditional box layout&lt;/h2&gt;
&lt;div class="trad-profile-icon"&gt;
  &lt;div class="trad-profile-icon-text"&gt;
    DC
  &lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;
  Credit for the traditional box layout approach due to &lt;a href="https://code-boxx.com/css-circles-text/#sec-text"&gt;&lt;em&gt;How to Create CSS Circles (And Add Text To It)&lt;/em&gt;, W.S. Toh of Code Boxx &lt;/a&gt; 
&lt;/p&gt;



I will be interested in your recommendations on maintainability, cross-browser compatibility, and compatibility with layout frameworks such as Foundation (XY Grid or Float Grid) and Bootstrap.
Codepen
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;