水平居中会破坏网站上的内容

Question

我尝试了许多不同的水平居中网站方法，但每种方法都会破坏页面或略微偏移。我会尽可能地详细说明。

我的网站包含HTML5视频的Bootstrap网格。您可以在此处预览网站：www.watchthis.limited我希望整个网格水平放置，以在内容上方和下方显示相同大小的黑条。我目前正在使用10％填充顶部的包装器，但这不是一个好的解决方案，因为所有浏览器中的内容都不是直接在中间。

我很确定主要问题是没有固定高度，因为我希望内容延伸到浏览器大小（因此每个图像的宽度为100％，高度为auto）。当我试图绝对定位页面时，内容只是修复到页面顶部。这是我在尝试使用padding-top之前尝试应用于包装器的代码：

width: 100%;
height: 100%;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

我还尝试将内容设置为表格并将子设置为vertical-align middle，但由于某种原因，仍然会偏移中间的内容。那么，有什么想法吗？如何垂直对齐没有固定高度或宽度的图像网格 - 甚至可能吗？任何帮助都将得到更多的赞赏，

感谢。

注意：我知道在较小的设备上查看该页面时，我目前正在更改移动设备的网站。

Answer 1

添加此CSS

.wrapper{
display: table-cell;
vertical-align: middle;
}

.wrapper的父div目前是body（或在div上制作）所以添加

    body{
    display: table;
    height:100%; //removed 800px;
    }