[解決済み] 真ん中に文字がある円を描くには？

質問

stackoverflowでこの例を見つけました。

cssだけで円を描く

これは素晴らしいことです。 でも、その例を修正して、円の真ん中にテキストを入れられるようにするにはどうしたらいいでしょうか？

こんなのも見つけました。 CSSで円内のテキストを縦・横中央揃えにする（iphoneの通知バッジのようなもの）。

しかし、なぜか私にはうまくいきません。 以下のようなテストコードを作成したところ

<div class="badge">1</div>

円ではなく、楕円の形になってしまいました。 どうすればうまくいくのか、コードをいじってみています。

どのように解決するのですか？

を設定する line-height を指定すると、divの高さと同じ値のテキストが垂直方向に中央揃えで1行表示されます。この例では、heightとline-heightは500pxです。

例

JSFiddle

.circle {
  width: 500px;
  height: 500px;
  line-height: 500px;
  border-radius: 50%;
  font-size: 50px;
  color: #fff;
  text-align: center;
  background: #000
}

<div class="circle">Hello I am A Circle</div>