居中对齐与表格单元格

Question

我正在尝试使用table-cell的方式将一个div垂直和水平居中。

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

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

但我更愿意像这里的JSFiddle一样把.logo包在另一个叫做.center 的 div 中，但由于某种原因，尽管在 JSFiddle 上有效，但它在我的网站上却无效。

- Steven_Harris_

---

你在测试哪个浏览器？ - Gurminder Singh

你是否被限制使用表格单元格方法？有什么原因吗？ - robabby

没有什么原因，只是想找出为什么它不起作用，在Google Chrome上进行测试。 - Steven_Harris_

您正在尝试在父级div中垂直和水平居中.logo。控制div的宽度和高度的是什么，这些是否已指定？ - Marc Audet

父元素未设置相对定位，因此 .logo 元素的定位相对于最近的祖先元素（如果没有祖先元素设置相对定位，则相对于文档进行定位）。不要混合使用垂直居中技术，选择一种即可。 - cimmanon

可能是如何使用CSS将文本垂直居中对齐在div中？的重复问题。 - Cole Tobin

Answer 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（table-cell）建立了宽度和高度上下文。

您可以应用 text-align 和 vertical-align 来根据需要修改 .centre-align。

请注意，如果要使用 text-align 属性在水平方向上居中对齐 .content，则它需要使用 display: inline-block。

- Marc Audet

---

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

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

Answer 2

使用flexbox会更容易实现。使用flexbox可以不必指定内容的高度，而是可以自动根据其所包含的内容进行调整。

演示

这是演示的要点。

.container{

  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;

}

HTML

<div class="container">
  <div class='content'> //you can size this anyway you want
    put anything you want here,
  </div>
</div>

- Louie Almeda

---

当内容尺寸超过父级尺寸时，您“忘记”演示问题了。 - Janis

楼主希望得到一个使用 display: 'table-cell' 的答案。 - Ian Steffy