如何在零宽度元素中实现文本水平居中？

这问题我太熟了！你遇到的核心问题是：外层div宽度为0，text-align: center根本没发挥空间——毕竟容器宽度是0，对齐也就无从谈起。咱们的目标是只偏移文本内容，绝对不动外层的零宽度容器和左边框，这样就能保证边框位置（也就是图表刻度的基准线）完全正确，同时文本以这条线为中心对齐。

下面给你两种实用的实现方式，按需选就行：

方式1：用伪元素（不用改HTML结构） #

这种方式适合不想修改现有HTML的场景，直接通过CSS生成文本：

.tick-mark {
  width: 0;
  border-left: 1px solid black;
  /* 让伪元素能相对这个容器定位 */
  position: relative;
  /* 可以根据图表需求调整刻度线长度 */
  height: 1em;
}

.tick-mark::after {
  /* 从元素的data-label属性读取文本 */
  content: attr(data-label);
  position: absolute;
  left: 0;
  /* 向左偏移自身宽度的50%，刚好让文本中心和左边框对齐 */
  transform: translateX(-50%);
  /* 防止文本换行打乱对齐 */
  white-space: nowrap;
  /* 调整文本和刻度线的间距 */
  margin-top: 1em;
}

对应的HTML：

<div class="tick-mark" data-label="foo"></div>

方式2：用子元素（HTML直接写文本） #

如果你的文本是动态生成或者需要直接写在HTML里，用子元素更直观：

.tick-mark {
  width: 0;
  border-left: 1px solid black;
  position: relative;
  height: 1em;
}

.tick-mark span {
  display: inline-block;
  /* 同样向左偏移自身宽度的50% */
  transform: translateX(-50%);
  white-space: nowrap;
  margin-top: 1em;
}

对应的HTML：

<div class="tick-mark"><span>foo</span></div>

为什么这两种方式可行？ #

• 外层div始终保持width: 0，左边框的位置完全不会偏移，完美对应图表横轴的刻度基准点；
• transform: translateX(-50%)是针对文本元素自身做偏移，不会影响外层容器的布局；
• white-space: nowrap确保文本不会因为换行导致对齐失效，特别适合较长的刻度文本。

你可以根据自己的图表样式，调整height、margin-top这些属性来适配刻度线长度和文本间距~

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