Вертикальный центр с CSS

Question

Я знаю, что есть много способов сосредоточиться на CSS. Центрирование чего угодно горизонтально довольно прямолинейно. Однако, если вы собираетесь центрировать все по вертикали, это совершенно новая история. Я просто хочу знать, почему мы не можем просто сказать нижний выровнять: auto; топ-Align: авто; как мы делаем, когда хотим что-то по центру горизонтально? Почему что-то, что кажется таким простым, как центрирование чего-то, кажется настолько сложным, что центрирование чего-то горизонтально настолько простое? Я знаю, что существует много способов, но давайте просто скажем, что у вас есть элемент неизвестного размера, который вы хотите центрировать внутри другого элемента неизвестного размера.

Я сижу с этим в течение почти двух дней, не нахожу хороший вопрос по этому вопросу, у нас есть тонны различных способов центрирования предметов по горизонтали, но почему нет ни одного стандарта CSS, способного центрировать это вертикально? Это плохо? Это заставляет людей плакать или беспорядочно вступать в труд? Плавит ли он ядерные реакторы?

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

Edit: код пример того, что я имею в виду: http://jsfiddle.net/VsakD/

CSS:

div.parentbox 
{ 
    width:500px; 
    height:500px; 
    border-style:solid; 
} 

div.childbox 
{ 
    width:300px; 
    height:300px; 
    border-style:solid; 
    margin-left:auto; 
    margin-right:auto; 
    margin-top:auto; 
    margin-bottom:auto; 
} 

HTML:

<div class="parentbox"> 
    <div class="childbox"> 
     I shall be in the middle of parentbox regardless of its size! 
    </div> 
</div> 

Answer 1

Может кто-то пожалуйста, выделите точно, почему я не могу просто сказать margin-top:auto; margin-bottom:auto; вертикальной совместятся, что было бы логично предположить, будет работать, так как вы margin-left:auto; margin:right:auto; горизонтально выровнять?

Согласно Spec (10.6.2):

Инлайн заменены элементы, на уровне блоков заменены элементы в нормальном потоке , «встроенный блок» заменены элементы в нормальном потоке и плавающие заменяемые элементы

Если «margin-top» или «margin-bottom» равны 'auto', их используемое значение: .

Именно поэтому использование сверху/снизу margin в этом случае, не вносит изменения.

Кстати, для того, чтобы выровнять Div элемент (с неизвестными размерами) вертикально внутри контейнера, вы могли бы следовать this approach:

.parentbox {   
    text-align: center; /* Align inline elements center horizontally */ 
    font: 0/0 a; /* <-- remove the gap between inline(-block) elements */ 
} 

.parentbox:before { 
    content: ' '; 
    display: inline-block; 
    vertical-align: middle; 
    height: 100%; 
} 

.childbox { 
    display: inline-block; 
    vertical-align: middle; 
    font: 1rem/1 Arial, sans-serif; /* <-- Reset the font */ 
} 

WORKING DEMO

Answer 2

Автор код с модификациями Я буду в середине родительского стола независимо от его размер!

div.parentbox 
{ 
    width:500px; 
    height:500px; 
    border-style:solid; 
    display: table; //added this line 
} 

div.childbox 
{ 
    width:300px; 
    height:300px; 
    border-style:solid; 
    margin-left:auto; 
    margin-right:auto; 
    margin-top:auto; 
    margin-bottom:auto; 
    display: table-cell; //added this line 
    vertical-align: middle; 
    text-align: center; 
}