如何用CSS实现文本以首个字符为基准水平居中对齐？

你要让子元素文本以第一个字符为基准居中，而非整个文本块居中，现有align-items: center是让整个文本容器居中，不符合需求。下面给你两种可行的实现方法：

方法一：无需修改HTML结构（用CSS伪元素） #

利用::first-letter伪元素定位第一个字符，再调整正文位置：

.box {
  display: flex;
  flex-direction: column;
  width: 100px;
  height: 100px;
  background-color: yellow;
}

.item {
  position: relative;
  /* 给正文预留第一个字符的位置，值可根据字体大小调整 */
  padding-left: 0.8em;
  line-height: 1.5; /* 保证行高一致 */
}

.item::first-letter {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

方法二：修改HTML结构（更精准可控） #

把第一个字符单独包裹，通过布局让它居中，剩余文本紧跟其后：

修改后的HTML #

<div class="box">
  <div class="item"><span class="lead-char">1</span></div>
  <div class="item"><span class="lead-char">1</span>/A</div>
  <div class="item"><span class="lead-char">1</span>/B</div>
</div>

对应CSS #

.box {
  display: flex;
  flex-direction: column;
  width: 100px;
  height: 100px;
  background-color: yellow;
}

.item {
  display: flex;
  justify-content: center;
  position: relative;
  line-height: 1.5;
}

.lead-char {
  position: absolute;
}

/* 让剩余文本紧跟第一个字符 */
.item .lead-char + * {
  margin-left: 0.8em;
}

两种方法都能实现你要的效果，第一种适合不想改动HTML的场景，第二种对字符位置的控制更精准，可根据实际需求选择。

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