Question

我使用display: flex在容器div中有两个div。一个div意味着只包含文本，并尽可能地将其居中放置在中心附近。另一个div包含响应内容（以及提供的演示中的图像），它基本上定义了flex的高度。

第一个子div包含使用display: table和display: table-cell模拟表格的div图层，以及height: 100%和vertical-align: middle。在任何人提及之前，我不能使用实际的<table>，因为它支持position: relative我的实际网站所使用的问题。

在Firefox和Edge中，所有内容都按预期加载并且运行良好（或者更好地与Edge可以集合）。但是，在Chrome中，使用display: table的div拒绝承认height: 100%。

Here is a demo of my problem

Answer 1

使用表格标签（或display:table）进行布局是错误的。您应该只使用表格来显示表格数据。你想要的东西可以通过CSS的这些mod来实现：

.flex-box {
    position: relative;
}
.table {
    position: absolute;
    width: 100%;
    height: 100%;
}
.table .table-cell {
    display: block;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    position: relative;
    width: 100%;
    max-height: 100%;
    overflow-x: hidden;
}

＆＃34; cell＆＃34;现在水平和垂直居中。如果内容溢出框，它会得到一个垂直滚动条。

这里有更新的fiddle。

Chrome不显示字母：表格div占据100％的高度

1 个答案: