Как выровнять div вертикально на полную неизвестную ширину? [Дубликат]

Центрирование вещей с помощью табличного дисплея очень удобно... Взгляните на это: http://jsfiddle.net/F9J4B/

Обратите внимание, что это не "макет с таблицей"... Это всего лишь три div, которые используют правила отображения таблицы. Правила семантики не нарушаются =)

HTML

<div class="table">
    <div class="tr">
        <div class="td">
            <p>Hello! I'm a DOM element. <br>I can be whatever size i want, and still still be in the center of things.</p>
        </div>
    </div>
</div>

CSS

body, 
html {
    height:100%
}
.table {
    width: 100%;
    height: 100%;
    display: table;
    background-color: #eee;
}
.tr {
    display: table-row;

}
.td {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

Центрирование коробки внутри другой коробки:

div{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

независимо от размера ящиков.

Внешнему ящику может потребоваться position: relative; для позиционирования внутренних ящиков для работы.

Медиа-запрос обрабатывает изображение, когда экран становится слишком маленьким.

.vertcenterdiv {
     position: absolute; 
     background-image: url('http://upload.wikimedia.org/wikipedia/commons/2/27/Square_200x200.svg'); 
     background-position: center center; 
     background-repeat: no-repeat; 
     background-size: 100% auto;  
     height: 200px; 
     width: 200px; 
     top: 50%; 
     left: 50%; 
     margin-top: -100px; 
     margin-left: -100px;
}
@media (max-width: 200px) {
     .vertcenterdiv {
          position: absolute; 
          height: 100%; 
          width: 100%; 
          top: 0; 
          left: 0; 
          margin-top: 0; 
          margin-left: 0;
     }
}