如何实现多行列表元素的项目符号垂直居中对齐？

原生HTML列表的项目符号默认与文本顶部对齐，vertical-align无法直接实现符号和多行文本的垂直居中，得通过自定义项目符号的方式解决，以下是两种可行方案：

方案1：Flex布局实现 #

利用Flex的align-items: center属性，让列表项内的文本和自定义符号自动垂直居中：

/* 移除默认列表样式 */
.centered-bullet-list {
  list-style: none;
  padding-left: 0;
}

/* 配置列表项布局 */
.centered-bullet-list li {
  position: relative;
  padding-left: 1.5em; /* 为自定义符号预留空间 */
  line-height: 1.6; /* 根据文本需求调整行高 */
  display: flex;
  align-items: center;
}

/* 自定义项目符号 */
.centered-bullet-list li::before {
  content: "•"; /* 可替换为其他符号如"■"、"●"等 */
  position: absolute;
  left: 0;
  font-size: 1.2em; /* 调整符号大小 */
}

方案2：绝对定位+位移实现 #

如果不想用Flex，也可以通过绝对定位结合transform让符号垂直居中：

.centered-bullet-list {
  list-style: none;
  padding-left: 0;
}

.centered-bullet-list li {
  position: relative;
  padding-left: 1.5em;
  line-height: 1.6;
  min-height: 1.6em; /* 保证单行文本时符号也能居中 */
}

.centered-bullet-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%); /* 将符号向上偏移自身高度的50%，实现垂直居中 */
  font-size: 1.2em;
}

两种方案都能让项目符号始终处于文本块的垂直中间位置，不管文本折成2行还是3行都能生效。

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