如何基于激活的子元素实现父div的精准垂直居中对齐

解决方案 #

你当前方案的核心问题是em是相对当前元素字体的单位，会受父级字体设置、设备默认字体参数影响，且手动维护10个偏移类的冗余度很高，可替换为以下两种更稳定的方案：

方案1：CSS变量 + transform 动态计算偏移（无JS依赖，兼容性好） #

改造HTML结构

直接通过行内样式传入当前激活的数字索引，无需手动拼接10个类名（React写法示例）：

<div className="column" style={{'--active-index': props.integer[0]}}>
  <div className="number columnValue_0">0</div>
  <div className="number columnValue_1">1</div>
  <!-- 其余2-9的子元素保持不变 -->
</div>

对应CSS代码

.column {
  /* 父容器设置为你需要的可视高度，比如只显示1个数字就设为和单个数高度一致 */
  height: 2.4em;
  overflow: hidden;
  position: relative;
  /* 核心计算逻辑：向上偏移【激活索引*单个数高度】，再加上父容器高度的一半，再减去单个数高度的一半，保证激活元素正好在父容器垂直中间 */
  transform: translateY(calc( var(--active-index) * -2.4em + 50% - 1.2em ));
  /* 加过渡可以实现滚动动画，不需要可以删掉 */
  transition: transform 0.3s ease;
}
.number {
  /* 固定每个数字的高度，保证计算基准统一，行高和高度一致保证文字垂直居中 */
  height: 2.4em;
  line-height: 2.4em;
}

注：如果担心em波动，可以把所有高度单位替换为固定px或者根相对单位rem，基准固定后所有设备计算结果完全一致。

方案2：原生滚动对齐（适合需要滑动交互的场景） #

如果需要支持手动滑动切换数字，可以用浏览器原生的滚动吸附能力，偏移完全由浏览器计算，精度最高：

CSS代码

.column {
  height: 2.4em;
  overflow-y: auto;
  /* 开启垂直方向强制滚动吸附 */
  scroll-snap-type: y mandatory;
  /* 隐藏滚动条，不需要可以删掉 */
  scrollbar-width: none;
}
.column::-webkit-scrollbar {
  display: none;
}
.number {
  height: 2.4em;
  line-height: 2.4em;
  /* 每个子元素滚动时对齐到父容器中间 */
  scroll-snap-align: center;
}

JS控制跳转到指定数字

// 找到对应激活数字的元素，调用原生API对齐
const activeEl = document.querySelector(`.columnValue_${yourNumber}`)
activeEl.scrollIntoView({ block: 'center', behavior: 'smooth' })

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