如何在div容器中仅使数字元素居中，不包含后缀pt？

问题描述 #

现有代码如下：

<div style="justify-content:center;border:1px solid;width:80px;display:flex;align-items: baseline">
  <div style="font-size:2rem">12</div>
  <div style="font-size:1rem">pt</div>
</div>

当前代码会使“12pt”整体居中，但需求是仅让数字（如12、123、1234等）居中，“pt”需紧跟在数字右侧。尝试过固定布局，但数字长度会变化，无法固定“pt”的位置，请问如何实现该效果？

解决方案 #

方法一：绝对定位实现单位跟随 #

核心思路是让数字在父容器中居中，单位通过绝对定位脱离文档流，直接贴在数字右侧：

<div style="width:80px;border:1px solid;display:flex;justify-content:center;">
  <div style="font-size:2rem;position:relative;">
    123
    <div style="font-size:1rem;position:absolute;left:100%;top:0;">pt</div>
  </div>
</div>

• 父容器用flex + justify-content:center保证数字始终居中
• 数字容器设为position:relative，作为单位容器的定位基准
• 单位容器设置position:absolute;left:100%，会自动对齐到数字的最右侧，不受数字长度影响

方法二：行内块结合文本居中 #

将数字和单位放在同一个行内元素中，利用父容器的文本居中保证数字居中，单位自然紧跟：

<div style="width:80px;border:1px solid;text-align:center;">
  <span style="font-size:2rem;">
    1234
    <span style="font-size:1rem;position:relative;top:0.6rem;">pt</span>
  </span>
</div>

• 父容器text-align:center让整个包含数字和单位的行内块居中，由于单位是行内元素，会紧跟在数字之后
• 通过position:relative;top可以微调单位的垂直位置，保证和数字的视觉对齐

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