改进第一个答案，只需去除填充，并添加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;
}

这是我的方法，用平方法。优点是它适用于不同的值，但你需要两个跨度。

.circle { display: inline-block; border: 1px solid black; border-radius: 50%; position: relative; padding: 5px; } .circle::after { content: ''; display: block; padding-bottom: 100%; height: 0; opacity: 0; } .num { position: absolute; top: 50%; transform: translateY(-50%); } .width_holder { display: block; height: 0; overflow: hidden; } <div class="circle"> <span class="width_holder">1</span> <span class="num">1</span> </div> <div class="circle"> <span class="width_holder">11</span> <span class="num">11</span> </div> <div class="circle"> <span class="width_holder">11111</span> <span class="num">11111</span> </div> <div class="circle"> <span class="width_holder">11111111</span> <span class="num">11111111</span> </div>

你用一个标准的方块，那是一个正方形

这是css3的特性，它不是很受支持，你可以依靠firefox和safari。

.circle { 宽度:10 em; 高度:10 em; -webkit-border-radius: 5 em; -moz-border-radius: 5 em; 边框:1px纯黑色; ｝ < div class = "圆" > < span > 1234 < / span > < / div >

我很惊讶没有人使用更容易理解的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>

对于0到99的数字来说，这样做是可行的:

.circle { 边框:0.1em纯灰色; 这个特性:100%; 高度:2 em; 宽:2 em; text-align:中心; ｝ .circle p { margin-top: 0.10 em; 字体大小:1.5 em; 粗细:大胆的; 字体类型:无衬线; 颜色:灰色; ｝ 身体< > < div class = "圆" > < p > < / p > 30 < / div > 身体< / >

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

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