How to create a circle with a number in the center that scales to fit the circle in HTML/CSS?

Question

There are many solutions for numbers in circles, but they use fixed sized. How to style the circle div for it to contain centered text or number of largest possible font to fit the circle?

Answer 1

I think this code solves your problem. Just make sure the font-size and the width of the parent is same, (5 rem in this example).

div{
  font-size: 5rem;
  width: 5rem;

  background-color: aquamarine;
  padding: 1rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

<div>5</div>