css: jak narysować okrąg z tekstem w środku?

Znalazłem ten przykład na stackoverflow:

Narysuj okrąg używając samego css

Który jest świetny. Ale chciałbym wiedzieć, jak zmodyfikować ten przykład, aby móc umieścić tekst w środku okręgu?

Znalazłem to także:Centrowanie tekstu w pionie i poziomie w kółku w CSS (podobnie jak w przypadku powiadomienia iPhone)

ale z jakiegoś powodu nie działa dla mnie. Kiedy tworzę następujący kod testowy:

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

zamiast koła otrzymuję owalny kształt. Próbuję pobawić się kodem, aby zobaczyć, jak mogę go uruchomić.

questionAnswers(15)

yourAnswerToTheQuestion