如何实现span元素内文本居中？附我的尝试代码及问题现象

你的问题出在span是行内元素，仅用text-center只能实现水平方向的居中，垂直方向的居中需要额外布局控制。用Tailwind CSS的话，最简单的方式是给span添加flex布局类，同时设置垂直和水平居中：

修改后的span代码：

<span className="absolute top-1 right-1 bg-wabu-keppel text-black font-bold h-10 w-10 rounded-full flex items-center justify-center">
  4
</span>

原理说明： #

• flex：把span转为flex容器
• items-center：实现垂直方向居中
• justify-center：实现水平方向居中

另外也可以用grid布局替代，效果一样：

<span className="absolute top-1 right-1 bg-wabu-keppel text-black font-bold h-10 w-10 rounded-full grid place-items-center">
  4
</span>

如果不想改布局，也可以通过设置line-height等于span的高度来实现垂直居中，配合text-center：

<span className="absolute top-1 right-1 text-center bg-wabu-keppel text-black font-bold h-10 w-10 rounded-full leading-[2.5rem]">
  4
</span>

（注：h-10对应Tailwind默认配置的高度是2.5rem，所以leading-[2.5rem]要和高度匹配）

内容的提问来源于stack exchange，提问作者Captai-N