Firefox 中的表格垂直对齐答案

【问题标题】：Table vertical-align in FirefoxFirefox 中的表格垂直对齐
【发布时间】：2014-01-31 17:09:19
【问题描述】：

问题是当使用<table>（或<div> 和display:table）时，如何垂直居中这个表格元素？

我使用了这种垂直居中的方法：

margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
overflow: auto;

在 Chrome（任何 Webkit 或 Blink）中使用此方法时，它运行良好，但在 Firefox 中则不行。在 Chrome 中运行此小提琴 (http://jsfiddle.net/Mu4yd) 时，表格垂直居中，而在 Firefox 中，它位于顶部。

是否应该添加一些东西以使其在 Firefox 中工作？或者，是否有任何其他替代方法可以在两个浏览器中垂直居中表格（至少）？

【问题讨论】：

标签： html css firefox

【解决方案1】：

有一个响应友好且灵活的解决方案。如果你不知道 div 的宽度或高度，你可以使用这个 CSS3 代码：

Vertical align center with transform - fiddle

.valign{
  transform: translate(-50%, -50%);    
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  position: absolute;
  top: 50%; 
  left: 50%;
}

【讨论】：

它有效。但是transform 不是很贵吗？没有更简单的解决方案吗？
我经常使用这段代码，我认为它是 CSS3 世界中的“轻量级”解决方案。

【解决方案2】：

您可以使用以下方法将其居中

#tablelo{
    background-color: black;
    height: 100px;
    width: 100px; 
    display: table;       
    margin: -50px 0 0 -50px;
    position: absolute;
    top: 50%; left: 50%;
    overflow: auto;
}

Fiddle Demo

【讨论】：

但这并不通用。每当更改表格大小时，都需要更改边距大小。