Html CSS垂直对齐表方法无效

我需要在不使用

display:inline block

的情况下使用CSS垂直对齐一个框。因为我不知道元素的高度，所以我使用了所描述的方法（CSS表方法）

A

A

A

B

B

B

B

---

但是，此测试页上的垂直对齐完全没有效果。根据这些div的计算CSS，显示值设置为block！如何使这些div出现在中间？

< P>一种方式，在很多方面，您可以通过将父级设置为“代码>位置：相对；code>及其子级到

位置：绝对；最高：50%；转化：translateY（-50%）。尽管这个问题以前已经回答过很多次。
从DIVs中删除
浮点：左
，
显示：表格单元格
和
浮点：左
一起删除没有意义

代码笔：

评论后添加：

像这样：codepen.io/anon/pen/NRxALO？
我在每个包含较小元素的表格单元格中插入/嵌套了另一个DIV，并为表格元素本身指定了背景色。
好的，我终于找到了答案。您必须使用flexbox样式（显示：flex）。使用此方法，可以在不指定高度的情况下使图元居中。页面介绍了如何使用它。
尝试从DIVs中删除float:left-显示：表格单元格和float:left在一起没有意义-请参见下面我的答案，使用CodePen，但这样会忽略元素的高度值-它们都具有相同的高度。但是，它看起来应该没有固定的边距。我不认为这个例子适合你的风格。我想你必须设定一个固定的高度。它应该看起来像但没有固定的边距或固定的高度。
<div style="background-color: black">
    <div style="background-color: aqua; display: table; margin: auto;">
        <div style="background-color: aliceblue; width: 200px; float: left; display: table-cell; vertical-align: middle;">
            <p>A</p>
            <p>A</p>
            <p>A</p>
        </div>
        <div style="background-color: green; height: 20px; width: 100px; float: left; display: table-cell; vertical-align: middle;"></div>
        <div style="background-color: aliceblue; width: 250px; float: left; display: table-cell; vertical-align: middle;">
            <p>B</p>
            <p>B</p>
            <p>B</p>
            <p>B</p>
        </div>
    </div>
</div>