Vertically and horizontally centering text in circle in CSS (like iphone notification badge)

Question

I\'m looking for a way of to do a cross-browser iphone-like badge in CSS3. I\'d obviously like to use one div for this, but alternative solutions would be fine. The importan

Answer 1

Modern Solution

The result is that the circle never gets distorted and the text stays exactly in the middle of the circle - vertically and horizontally.

.circle {
  background: gold;
  width: 40px; 
  height: 40px;
  border-radius: 50%;
  display: flex; /* or inline-flex */
  align-items: center; 
  justify-content: center;
}

text

Simple and easy to use. Enjoy!