居中水平打破网站上的内容

Question

我已经尝试了许多不同的方法来水平居中我的网站，但每一种方法要么打破页面，要么略微补偿它。我会尽可能地尝试和阐述。

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

我敢肯定主要的问题是没有固定的高度，因为我想让内容延伸到浏览器大小（因此每个图像都是100％宽度，高度：自动）。当我试图绝对定位页面时，内容只是修复了页面的顶部。这是我试图诉诸填充顶之前应用到包装代码：

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

我也试着设置内容为表和子设置为垂直对齐中间，但仍由于某种原因在中间偏移了内容。那么，有什么想法？如何垂直对齐一个没有固定高度或宽度的图像网格 - 它甚至有可能吗？任何帮助将不胜感激，

谢谢。

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

Answer 1

添加这个CSS

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

父DIV的.wrapper目前body（或做出格）所以加

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