如何在span标签内实现单个字符及短文本的居中对齐？

问题原因 #

• Flex布局配置了justify-content-between，该属性作用是让子元素两端对齐，仅有一个文本内容时会默认靠左，和居中需求冲突。
• 转为Flex容器后，text-align: center对Flex容器内的直接文本节点不生效，无法起到居中作用。
• 文本末尾多余的 空格也会造成视觉上的水平偏移。

调整方案 #

1. 修改HTML配置
   替换错误的Flex对齐类，删除多余空格：

<span class="d-flex justify-content-center align-items-center">1</span>

justify-content-center实现水平居中，align-items-center实现垂直居中。

2. 优化CSS配置
   可以新增行高属性修正字体基线偏移问题，不需要固定宽度可以删除width: 100%让标签自适应内容：

border: 2px solid #f07d00;
border-radius: 20px;
position: relative;
background-color: #fff;
color: #0f1c2e;
box-shadow: 0px 3px 13px #EF7F1A33;
font-size: 14px;
font-weight: 600;
padding: 3px 4px;
/* 如需要固定宽度保留以下配置，不需要可删除 */
width: 100%;
/* 新增行高修正字体基线偏移 */
line-height: 1;

调整后不管是单个字符还是多字符内容都可以实现水平垂直双向居中。

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