Question

我需要使用CSS垂直对齐框而不使用display: inline-block。由于我不知道我的元素的高度，我使用here描述的方式（CSS表方法）。

<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>

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

Answer 1

从DIV中删除float:left - display:table-cell和float:left一起毫无意义

Codepen：http://codepen.io/anon/pen/ORrNdW

评论后的补充：

像这样：codepen.io/anon/pen/NRxALO？我在包含较小元素的每个表格单元格中插入/嵌套了另一个DIV，并将背景颜色分配给表格元素本身。

Answer 2

通过多种方式，您可以通过将父级设置为position:relative;并将其子级设置为position:absolute; top:50%; transform:translateY(-50%);来实现此目的。虽然这个问题之前已经被多次回答过了。

Answer 3

好的，我终于找到了答案。您必须使用flexbox样式（display：flex）。使用此方法，您可以在不指定高度的情况下居中元素。 This页面介绍了如何使用它。

CSS垂直对齐表方法没有任何效果

3 个答案: