简单地说：如果父div包含从0到9的垂直列表，如何将div垂直精确地居中到活动子元素上？

我的HTML实际上是:

<div className={`column currentValue${props.integer[0]}`}>
     <div className="number columnValue_0">
          0
     </div>
     <div className="number columnValue_1">
          1
     </div>
     <div className="number columnValue_2">
          2
     </div>
     <div className="number columnValue_3">
          3
     </div>
     <div className="number columnValue_4">
          4
     </div>
     <div className="number columnValue_5">
          5
     </div>
     <div className="number columnValue_6">
          6
     </div>
     <div className="number columnValue_7">
          7
     </div>
     <div className="number columnValue_8">
          8
     </div>
     <div className="number columnValue_9">
          9
     </div>
</div>

根据传递的数字，CSS如下所示:

<div className={`column currentValue${props.integer[0]}`}>
     <div className="number columnValue_0">
          0
     </div>
     <div className="number columnValue_1">
          1
     </div>
     <div className="number columnValue_2">
          2
     </div>
     <div className="number columnValue_3">
          3
     </div>
     <div className="number columnValue_4">
          4
     </div>
     <div className="number columnValue_5">
          5
     </div>
     <div className="number columnValue_6">
          6
     </div>
     <div className="number columnValue_7">
          7
     </div>
     <div className="number columnValue_8">
          8
     </div>
     <div className="number columnValue_9">
          9
     </div>
</div>

我在需要的地方使用FlexBox，但主要的关注点是试图实现这一点。在我的pc显示器之外的其他设备上，使用“em”动态地垂直对齐每一列不会给出准确的结果。

顺晟科技：

一个疯狂的想法使用和浮动。诀窍是使您的列表中包含float元素。依靠默认的基线对齐方式，我们只需将活动元素设置为非浮点，这样它就可以定义其父元素的基线: