Center text character ☢ vertically and horizontally within a circle (CSS)

Question

I am trying to center this text character ☢ within a circle. (☢)

While IE 10 displays the text vertically and horizontally centered, both Chrome and Firefox r

Answer 1

You've done everything correctly with your flexbox CSS.

The issue appears to be with line-height. You're using an html entity as text and it looks like .tl-icon is inheriting a value for line-height that doesn't work well.

Try adjusting your line-height, and using a unitless value for it. This way the line-height will compute to whatever the font size is for the interior element.

.tl-icon {
    line-height:.9;
}