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

Ответ 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;
}