Центрирование по горизонтали разбивает контент на веб-сайте

Question

Я пробовал много разных методов горизонтального центрирования моего сайта, но каждый метод либо разбивает страницу, либо слегка смещает ее. Я постараюсь как можно подробнее разобраться.

У меня есть веб-сайт, содержащий сетку Bootstrap из видео HTML5. Вы можете просмотреть сайт здесь: 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 (или сделать на DIV), чтобы добавить

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