Resizable circles with center aligned text

There is common design pattern, text in circle. Usual implementations that I saw was pretty static. Each new size was overheated with text vertical alignment.

Ideally size change should be done with one property change. It’s just a circle anyway, why so serious?

Here is pretty robust solution how to do it:

There is couple tricks behind: padding: 50% o, which stretch text node and line-height: 0, which middle aligning text. All other stuff is pretty obvious.

You’re applying font-size: 20px and receiving 20px element. That’s it.