居中水平打破網站上的內容

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; 
    }