Центрирование неизвестным

Question

Я хотел бы центрировать и зажимать размеры дочернего div внутри его родителя.

<style type='text/css'> 
    .parent { 
    width: 100%; 
    height: 100%; 
    } 
    .child { 
    max-width: 100%; 
    max-height: 100%; 
    } 
</style> 

<div class="parent"> 
    <div class="child"> 
    <img src='dog.jpg' /> 
    </div> 
</div> 

Вот ограничения:

• Родитель DIV установлен, чтобы занять весь экран (неизвестного размера), так и width:100%height:100%.
• Ширина и высота дочернего div неизвестны. В одном случае дочерний div содержит изображение. В другом - видео.
• Ширина и высота дочернего div должны быть ограничены размером родителя, поэтому max-width: 100% и max-height: 100%.
• Детский div должен быть вертикально и горизонтально центрирован внутри родителя.
• В идеале это должно работать без javascript.
• IE может быть оставлен без поддержки :)

Я перепробовал все методы, перечисленные в этой превосходной статье, 'Absolute Centering in CSS', и никто из них не выгорел. Вот почему:

• Absolute центрирование: Для того, чтобы этот метод работы с ребенком неизвестного размера, вы должны установить display:table на ребенка. Затем вы можете ограничить максимальную ширину содержимого ребенка, но не максимальную высоту, потому что по правилам CSS 2.1 таблицы визуализируются в соответствии с их содержимым.
• Отрицательные поля: Не допускается изменение высоты.
• Превращает: Нежелательно, потому что это может привести к размытому рендерингу.
• Таблица-ячейка: Не работает по той же причине, что и абсолютное центрирование, например, рендеринг таблицы.
• Inline-block: Не работает в том важном случае, когда ребенок имеет ширину 100%.
• Flexbox: Хорошо работает до тех пор, пока не произойдет изменение размера окна, после чего вы должны принудительно перерисовать Webkit для распространения изменений центрирования. Этот hack выполняет эту работу, но это все равно взлома. Я хочу верить, что есть более элегантное решение.

Answer 1

Лучшим решением здесь является использование псевдонима элемента :before. Проверьте эту статью на центрирования неизвестное, http://css-tricks.com/centering-in-the-unknown/

SEE THE DEMO HERE

body,html { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
} 
.container { 
    text-align: center; 
    background: #ccc; 
    width: 100%; 
    height: 100%; 

} 

.container:before { 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
    margin-right: -0.25em; /* Adjusts for spacing */ 
} 

.image { 
    display: inline-block; 
    max-width: 100%; 
    max-height: 100%; 
    vertical-align: middle; 
    padding: 10px 15px; 
    border: #a0a0a0 solid 1px; 
    background: #f5f5f5; 
} 

Answer 2

Вы можете использовать display:table и display:table-cell как так Jsfiddle. Хотя это будет только центр изображение ребенка div.

Если вам нужно иметь центрированный DIV вокруг изображения, вы всегда можете добавить еще один DIV внутри child DIV со стилем display: inline-blockexample