无法定位显示:具有位置的表:绝对

Question

我在垂直和水平方向使用此CSS将此CSS（headCT）。我必须添加显示：表，因为我想要其中的中心元素，并带有显示：table-cell;

.headct {
    height: 283px;
    background: url(../images/icon/bg1.png);
    background-size: cover;
    text-align: center;
    display: table;
    vertical-align: middle;
    padding: 20px;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    bottom: 0;
    top: 0;
    margin-top: auto;
    margin-bottom: 120px;
}
.head-inner {
   display:table-cell;
   vertical-align:middle;
}

html喜欢：

<div class="headct">
   <div class="head-inner">
        The content
   </div>
</div>

它仅适用于Chrome，但在Firefox或其他方面不起作用。请帮助我纠正它。非常感谢。

Answer 1

除非您真的想在页面中显示表格数据，Excel样式，我将对表布局进行投票。我会查看一个flex布局，该布局非常易于使用，以垂直或水平地将组件中心/合理化。例如，在您的情况下，

类似的东西：

.headct {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%; <-- you can use whatever values but you have to specify a size
}
.head-inner {
 <-- nothing special to put here
}

但是，如果您想坚持表布局，则在具有显示表的元素中添加一个宽度可以解决问题。例如：

.headct {
    height: 100%;
    width: 800px;
    background: url(../images/icon/bg1.png);
    background-size: cover;
    text-align: center;
    display: table;
    vertical-align: middle;
    padding: 20px;
    margin: 0 auto;
    table-layout: fixed;
}
.head-inner {
    display:table-cell;
    vertical-align:middle;
}

vertical-align: middle将组件相对于其父级的大小中心，因此，如果要垂直将其居中，则可以添加100％的高度。另外，据我所知，余量：0自动技巧仅适用于水平对齐，因此，如果您想在顶部/底部的边距，则必须自己给它们尺寸。另一个支持Flex布局IMO的论点。

哦，它可能是错别字，但您缺少'。对于您的总体课程。

Answer 2

您有一个错字（headct缺少.）：

.headct {
    height: 283px;
    background: url(../images/icon/bg1.png);
    background-size: cover;
    text-align: center;
    display: table;
    vertical-align: middle;
    padding: 20px;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    bottom: 0;
    top: 0;
    margin-top: auto;
    margin-bottom: 120px;
}
.head-inner {
   display:table-cell;
   vertical-align:middle;
}

<div class="headct">
   <div class="head-inner">
        The content
   </div>
</div>