你可以使用这个css

span {
    display: block;
    height: 60px;
    width: 60px;
    line-height: 60px;

    -moz-border-radius: 30px; /* or 50% */
    border-radius: 30px; /* or 50% */

    background-color: black;
    color: white;
    text-align: center;
    font-size: 2em;
}

因为你想要一个圆，你需要设置相同的值为width，height和line-height(垂直居中的文本)。您还需要将该值的一半用于边界半径。

此解决方案始终呈现圆形，而不考虑内容长度。

但是，如果您想要一个与内容一起扩展的椭圆，那么http://jsfiddle.net/MafjT/256/

调整内容 – 改进

在这个https://jsfiddle.net/36m7796q/2/中，您可以看到如何呈现一个圆圈，以响应内容长度的变化。您甚至可以编辑最后一个圆圈上的内容，以查看直径如何变化。