HTML CSS
(quick & simple example)
<div class="circle"> <div class="txt">TEXT</div> </div>
PERCENTAGE WIDTH + BORDER RADIUS .circle { width: 20%; border-radius: 50%; background: red; }
MATCH HEIGHT TO WIDTH .circle::after { content: ""; display: block; padding-bottom: 100%; }
CENTER TEXT IN CIRCLE .circle .txt { position: absolute; bottom: 50%; width: 100%; text-align: center; }
NECESSARY TO POSITION TEXT .circle { position: relative; line-height: 0; }