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

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

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

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

Изменить: Образец кода, что я имею в виду: 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>

Ответ 1

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

В соответствии с Spec (10.6.2):

Встроенные замещенные элементы, замещенные на уровне блока элементы в нормальном поток, "встроенный блок" замещал элементы в нормальном потоке и плавающий замененные элементы

Если "margin-top" или "margin-bottom" "auto" , их используемое значение 0.

Вот почему использование верхнего/нижнего margin в этом случае не вносит изменений.

Кстати, чтобы выровнять элемент div (с неизвестными размерами) вертикально внутри контейнера, вы можете следовать этому подходу:

.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 */
}

РАБОЧИЙ ДЕМО

Ответ 2

Вы можете легко найти более старые методы для этого, но здесь обсуждается более новая методика: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Он работает в IE9 + и всех других браузерах. Преимущество использования этого - не знать высоту элемента или использовать абсолютное позиционирование. Метод строк-строк не влияет на несколько строк текста.

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Ответ 3

Подход display: table является одним из способов, но также можно использовать CSS-преобразования. В отличие от многих других свойств CSS, таких как "верх", для которых проценты фигурируют относительно содержащего элемента, преобразования CSS применяют проценты к самому элементу. Таким образом, вы можете поместить элемент на 50% вниз внутри своего контейнера, а затем преобразовать его на 50% от своего собственного размера:

.center-me {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  margin-left: auto; margin-right: auto;
  width: 300px; /* or whatever */
}

<div class=center-me> Hello World! </div>

Спасибо за великого Дейва Уолша. Вот jsfiddle to продемонстрировать.

Ответ 4

Лучший способ получить технику, которую вы хотите, - это использовать правила table display.

<div class="parent-container'>
   <div class="child-container">
         This is vertically centered text!
   </div>
</div>

Трюк находится в CSS

    .parent-container {
        display: table;
        width: 100%;
        height: 300px;
        background-color: #ff0000;
    }

    .child-container {
        display: table-cell;
        vertical-align: middle;
    }

Если родительский контейнер отображается как table, а дочерний элемент отображается как cell, он следует тем же правилам выравнивания по вертикали, что и table, потому что это то, что вы говорите ему, чтобы распознать себя как.

Здесь моя скрипка JS для справки. Я установил фиксированную высоту, чтобы показать вертикальное выравнивание в действии, но на самом деле он будет работать с процентными высотами или вычисленными высотами от заполнения. http://jsfiddle.net/JTVeG/

Ответ 5

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

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