Eu encontrei este exemplo no stackoverflow:

Desenhe o círculo usando css sozinho

O que é ótimo. Mas gostaria de saber como modificar esse exemplo para que eu possa incluir texto no meio do círculo?

Eu também encontrei isto:Centralização vertical e horizontal de texto em círculo em CSS (como o emblema de notificação do iPhone)

mas por algum motivo, não funciona para mim. Quando eu crio o seguinte código de teste:

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

em vez de um círculo, eu tenho uma forma oval. Estou tentando brincar com o código para ver como posso fazê-lo funcionar.