我很惊讶没有人使用更容易理解的flex，所以我把我的答案放在这里:

要创建一个圆，请确保宽等于高 为了适应圆圈中数字的字体大小，请使用em而不是px 要将数字居中，请使用flex和justify-content: center;对齐项目:中心; 如果数字增加(例如>1000)，则同时增加宽度和高度

这里有一个例子:

.circled-number { color: #666; border: 2px solid #666; border-radius: 50%; font-size: 1rem; display: flex; justify-content: center; align-items: center; width: 2em; height: 2em; } .circled-number--big { color: #666; border: 2px solid #666; border-radius: 50%; font-size: 1rem; display: flex; justify-content: center; align-items: center; width: 4em; height: 4em; } <div class="circled-number"> 30 </div> <div class="circled-number--big"> 3000000 </div>

下面是JSFiddle的演示和代码片段:

.numberCircle { 这个特性:50%; 宽度:36 px; 高度:36 px; 填充:8 px; 背景:# fff; 边框:2px实体#666; 颜色:# 666; text-align:中心; 字体:32px Arial, sans-serif; ｝ < div class = " numberCircle " > < / div > 30

我的答案是一个很好的起点，其他一些答案为不同的情况提供了灵活性。如果你关心IE8，看看我回答的旧版本。

如果是20或更低，你可以直接使用unicode字符①②…⑳

http://www.alanwood.net/unicode/enclosed_alphanumerics.html

The problem with most of the other answers here is you need to tweak the size of the outer container so that it is the perfect size based on the font size and number of characters to be displayed. If you are mixing 1 digit numbers and 4 digit numbers, it won't work. If the ratio between the font size and the circle size isn't perfect, you'll either end up with an oval or a small number vertically aligned at the top of a large circle. This should work fine for any amount of text and any size circle. Just set the width and line-height to the same value:

.numberCircle { 宽度:120 px; 行高:120 px; 这个特性:50%; text-align:中心; 字体大小:32像素; 边框:2px实体#666; ｝ < div class = " numberCircle " > < / div > 1 < div class = " numberCircle”> 100 < / div > < div class = " numberCircle”> 10000 < / div > < div class = " numberCircle”> 1000000 < / div >

如果您需要使内容更长或更短，您所需要做的就是调整容器的宽度以更好地适应。

在JSFiddle上可以看到。

我很惊讶没有人使用更容易理解的flex，所以我把我的答案放在这里:

要创建一个圆，请确保宽等于高 为了适应圆圈中数字的字体大小，请使用em而不是px 要将数字居中，请使用flex和justify-content: center;对齐项目:中心; 如果数字增加(例如>1000)，则同时增加宽度和高度

这里有一个例子:

.circled-number { color: #666; border: 2px solid #666; border-radius: 50%; font-size: 1rem; display: flex; justify-content: center; align-items: center; width: 2em; height: 2em; } .circled-number--big { color: #666; border: 2px solid #666; border-radius: 50%; font-size: 1rem; display: flex; justify-content: center; align-items: center; width: 4em; height: 4em; } <div class="circled-number"> 30 </div> <div class="circled-number--big"> 3000000 </div>

改进第一个答案，只需去除填充，并添加line-height和vertical-align:

.numberCircle {
   border-radius: 50%;       

   width: 36px;
   height: 36px;
   line-height: 36px;
   vertical-align:middle;

   background: #fff;
   border: 2px solid #666;
   color: #666;

   text-align: center;
   font: 32px Arial, sans-serif;
}