垂直和水平居中对齐HTML正文内容

Question

我创建了一个JSFIDDLE，在这里我粘贴了从另一个堆栈交换线程在线获取的代码，以显示如何使用滚动的响应表。 我在测试该方法时修改了该代码，它在我的机器上运行良好。 我唯一的问题是整个桌子的顶部对齐。 我只是无法弄清楚什么属性需要更改才能使整个表水平和居中对齐。 如果任何一位大师有任何建议，那就太好了！

JSFIDDLE在这里

background-size: 50px 50px;
background-color: #fff;
background-size: 50px 50px;
vertical-align: middle;

我尝试添加Vertical-align：middle

似乎不起作用

同样，实际图像在TD内底部对齐。 是否有可能使它们居中对齐。

谢谢

谢谢！

Answer 1

在受支持的浏览器（大多数）中，可以结合使用top：50％/ left：50％与translateX（-50％），translateY（-50％）来动态垂直/水平居中元素。

.container {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);}

http://jsfiddle.net/47x60k4w/show/