与表格单元中心对齐答案

【问题标题】：Center align with table-cell与表格单元中心对齐
【发布时间】：2021-03-07 06:34:14
【问题描述】：

我正在尝试使用表格单元格的方式将 div 垂直和水平居中。

当我使用以下代码时它可以工作：

div {
  display: table;
}
.logo {
  display: table-cell;
  position: absolute;
  vertical-align: middle;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}

但我宁愿将 .logo 包装在另一个名为 .center 的 div 中，就像这里的 JSFiddle 一样，但出于某种原因，虽然它在 JSFiddle 中有效，但在我的网站上却不适合我。

【问题讨论】：

你在什么浏览器上测试？
您是否受限于使用表格单元方法？有什么原因吗？
没有原因，只是想弄清楚它为什么不起作用，在谷歌浏览器上测试。
您正试图将.logo 在父div 中垂直和水平居中。 div的宽高是由什么控制的，这些是指定的吗？
父元素不是相对定位的，所以 .logo 是相对于下一个最近的祖先定位的（如果没有祖先是相对定位的，那么它是相对于文档定位的）。不要混合使用垂直居中技术，选择其中一种。

标签： html css

【解决方案1】：

这是一个很好的起点。

HTML：

<div class="containing-table">
    <div class="centre-align">
        <div class="content"></div>
    </div>
</div>

CSS：

.containing-table {
    display: table;
    width: 100%;
    height: 400px; /* for demo only */
    border: 1px dotted blue;
}
.centre-align {
    padding: 10px;
    border: 1px dashed gray;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.content {
    width: 50px;
    height: 50px;
    background-color: red;
    display: inline-block;
    vertical-align: top; /* Removes the extra white space below the baseline */
}

查看演示：http://jsfiddle.net/audetwebdesign/jSVyY/

.containing-table 为.centre-align（表格单元格）建立宽度和高度上下文。

您可以根据需要申请text-align 和vertical-align 更改.centre-align。

请注意，.content 需要使用 display: inline-block 才能使用 text-align 属性水平居中。

【讨论】：

我会使用列表项而不是 div。将
设置为 display: table，然后子元素会有 display: table-cell。然后，您可以将文本居中并对表格单元格执行任何操作。

太棒了。我在三星（Android）浏览器中遇到了这个问题。 Chrome（PC）在表格单元上应用vertical-align:bottom，但三星浏览器没有......你的解决方案成功了。