Question

问题在于使用<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中运行？或者，是否还有其他方法可以在两个浏览器中垂直居中（至少）？

Answer 1

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

#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

Answer 2

有一个响应友好且灵活的解决方案。如果您不知道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%;
}

Firefox中的表vertical-align

2 个答案: