使用text-align: center时如何消除文本居中的间隙？

问题现象与描述 #

我在使用text-align: center时发现，想要居中的文本并未真正实现视觉居中。以下是示例代码及效果截图：

示例代码 #

CSS代码

html,
body {
  max-width: 100%;
}

h1 {
  text-align: center;
  text-transform: uppercase;
  font-size: 60pt;
  font-family: sans-serif;
  color: white;
  font-weight: 300;
}

HTML代码

<h1>
  <span style="background-color: green">Digital</span> <span style="background-color: blue">World</span>
</h1>

效果截图 #

可以看到绿色和蓝色的容器已完全居中，但容器内的文本却没有，容器尺寸大于文本本身，具体表现为：

• "Digital"中的"D"左侧有空白，而"L"右侧几乎没有空白
• "World"中的"W"左侧几乎没有空白，而"D"右侧有明显间隙

测试后发现不同字符会导致不同结果，推测这与字体及字形有关——较宽的"W"比"D"占用了更多字形可用空间。研究font-feature-settings及CSS规范后，猜测用户代理（UA）计算文本尺寸的方式与视觉居中的逻辑不同，但不确定是否正确。

提出的问题 #

1. 文本使用text-align: center居中时为何会出现间隙？
2. 如何让用户代理（UA）消除这些间隙？

问题解答 #

1. 间隙出现的原因 #

text-align: center是基于**字体的字形边界盒（glyph bounding box）**来计算居中的，而非视觉上的字符实际宽度。

每个字体的字符都有预设的"字距盒（advance width）"，这个宽度包含了字符本身的宽度以及字符前后的预留空间（用于排版时的字符间距）。不同字符的字距盒设计不同，比如大写"W"因为字形较宽，其左侧的预留空间会被压缩，而右侧保留更多；反之"D"的左侧预留空间更大。当text-align: center以整个字距盒的宽度为基准居中时，就会出现视觉上的偏移，看起来文本没有真正居中。

简单来说：CSS的居中是基于字体定义的"逻辑宽度"，而我们视觉上期望的是基于"实际字符的视觉宽度"居中，两者的计算基准不一致导致了间隙问题。

2. 消除间隙的解决方法 #

针对这个问题，可以通过以下几种方式调整：

• 方法1：使用text-align-last: center配合text-align: justify（单行文本适用）
  给容器添加以下CSS，让文本两端对齐后最后一行居中，平衡字符两侧间隙：

  h1 {
    text-align: justify;
    text-align-last: center;
  }
  

• 方法2：利用CSS transform手动微调
  将span设为行内块元素，通过transform: translateX()根据视觉偏移调整位置：

  span {
    display: inline-block;
  }
  span:first-child {
    transform: translateX(2%); /* 根据实际情况调整数值 */
  }
  span:last-child {
    transform: translateX(-2%);
  }
  

  此方式适合固定文本的场景，需手动测试调整数值。

• 方法3：启用字体字距调整特性
  通过font-feature-settings启用字体内置的字距优化，或用letter-spacing微调：

  h1 {
    font-feature-settings: "kern" 1; /* 启用字体 kern 特性，自动调整字符间距 */
    letter-spacing: -0.5px; /* 根据字体和字号微调，数值按需调整 */
  }
  

• 方法4：让容器宽度适配视觉内容
  将span设为块级元素，宽度自适应内容后用margin: auto单独居中：

  span {
    display: block;
    width: fit-content;
    margin: 0 auto;
  }
  

  若需要两个span同行显示，可改为display: inline-block，并保持父容器text-align: center，能一定程度上减少字距盒带来的偏移。

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