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

在css中做这样的事情吗

 div {
    width: 10em; height: 10em; 
    -webkit-border-radius: 5em; -moz-border-radius: 5em;
  }
  p {
    text-align: center; margin-top: 4.5em;
  }

使用段落标签来书写文本。希望这能有所帮助

对于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 > 身体< / >

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上可以看到。

对于根据内容变化的圆圈大小，这应该是有效的:

.numberCircle { display: inline-block; line-height: 0px; border-radius: 50%; border: 2px solid; font-size: 32px; } .numberCircle span { display: inline-block; padding-top: 50%; padding-bottom: 50%; margin-left: 8px; margin-right: 8px; } <span class="numberCircle"><span>30</span></span> <span class="numberCircle"><span>1</span></span> <span class="numberCircle"><span>5435</span></span> <span class="numberCircle"><span>2</span></span> <span class="numberCircle"><span>100</span></span>

它依赖于内容的宽度加上margin- s来确定半径，然后使用padding- s扩展高度以匹配。margin-'s需要根据字体大小进行调整。

更新以删除内部元素:

.numberCircle { display: inline-block; border-radius: 50%; border: 2px solid; font-size: 32px; } .numberCircle:before, .numberCircle:after { content: '\200B'; display: inline-block; line-height: 0px; padding-top: 50%; padding-bottom: 50%; } .numberCircle:before { padding-left: 8px; } .numberCircle:after { padding-right: 8px; } <span class="numberCircle">30</span> <span class="numberCircle">1</span> <span class="numberCircle">5435</span> <span class="numberCircle">2</span> <span class="numberCircle">100</span>

使用伪元素强制高度。垂直对齐需要零宽度空间。将line-height:0px从外层移到伪层，这样在IE8降级时至少是可见的。

下面是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，看看我回答的旧版本。