如何实现数字在圆形容器内完美居中？解决数字偏移问题

问题根源 #

没错，这个偏移问题确实和字体密切相关。你用的Arial属于比例字体（非等宽），这类字体里不同数字的宽度不一样：比如数字1的宽度远小于6、9，当组合成11、12这种包含窄字符的数字时，整个.number元素的实际宽度会偏窄。虽然flex的justify-content: center是基于元素本身宽度居中，但视觉上因为字符分布不均，就会显得数字偏右；而62、92里的6、9宽度较宽，整体宽度更接近容器的视觉中心，所以看起来正常。

另外，HTML里<span class="number">标签后面的多余空格，也会给元素增加一点额外宽度，加重偏移感。

解决办法 #

1. 使用等宽字体（推荐）

等宽字体里每个字符的宽度完全一致，不管是1还是9，组合后的数字整体宽度对称，视觉上就能完美居中。修改.number的字体设置：

.number {
  font-size: 14px;
  font-family: 'Courier New', monospace; /* 替换成等宽字体 */
  font-weight: 400;
}

2. 微调字符间距（适配现有字体）

如果不想更换字体，可以通过letter-spacing微调字符间的距离，弥补窄字符带来的宽度差。比如给.number添加：

.number {
  /* 其他样式不变 */
  letter-spacing: 0.3px; /* 根据实际效果调整数值 */
}

不过这种方法需要针对不同数字组合调整，通用性不如等宽字体。

3. 清理HTML多余空格

移除HTML中<span>标签后面的空格，避免额外宽度干扰：

<div class="circle circle-selected status-past-due" title="Reminders Past Due">
    <span class="number">42</span>
</div>
<!-- 其他div同理，去掉span后面的空格 -->

修改后的完整代码示例 #

CSS

.circle {
  width: 30px; 
  height: 30px;
  border-radius: 50%; 
  border: 1px solid gray;
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
  cursor:pointer;
  user-select: none;
}

.number {
  font-size: 14px;
  font-family: 'Courier New', monospace;
  font-weight: 400;
}

.status-past-due {
  background-color: #FF9900;
}

.status-due-today {
  background-color: #6FA8DC;
}

.status-future {
  background-color: #93C47D;
}

.status-completed {
  background-color: #CCCCCC;
}

.status-all {
  background-color: white;
}

.circle:hover {
    filter: brightness(1.2);
}

.circle:active {
    width: 24px; 
    height: 24px;
    border: 4px solid gray;    
}

.circle-selected {
    width: 24px; 
    height: 24px;
    border: 4px solid gray;    
}

div {
  margin-bottom: 5px;
}

HTML

<div class="circle circle-selected status-past-due" title="Reminders Past Due">
    <span class="number">42</span>
</div>

<div class="circle status-due-today" title="Reminders Past Due">
    <span class="number">12</span>
</div>

<div class="circle status-future" title="Reminders Past Due">
    <span class="number">11</span>
</div>

<div class="circle status-completed" title="Reminders Past Due">
    <span class="number">62</span>
</div>

<div class="circle status-all" title="Reminders Past Due">
    <span class="number">92</span>
</div>

内容的提问来源于stack exchange，提问作者AngryHacker