Как центрировать div вертикально?

У меня есть div, который я хочу центрировать по горизонтали и по вертикали.

Для горизонтальной проблемы все отлично, но у меня проблема с вертикальным выравниванием.

Я пробовал это:

#parent {
    display: table;
}

#child {
    display: table-row;
    vertical-align: middle;
}

но это не работает.

Ответ 1

Если вам нужно только поддерживать браузеры, поддерживающие transform (или его префиксные версии поставщика), используйте этот один странный старый трюк для вертикального выравнивания элементов.

#child {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Если вам нужно поддерживать старые браузеры, вы можете использовать их комбинацию, но они могут быть болью из-за различий в рендеринге block vs table.

#parent {
    display: table;
}

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

Если ваша высота установлена, и вам нужно поддерживать те действительно старые, надоедливые браузеры...

#parent {
   position: relative;
}

#child {
   height: 100px;
   position: absolute;
   top: 50%;
   margin-top: -50px;
}

Если высота не установлена, существует способ .

Посмотрите на jsFiddle.

Ответ 2

Имея родительское свойство as, display:table и дочернее свойство как display: table-cell и vertical-align: middle, работали для меня.

Ответ 3

Во-первых, обработка разметки без таблиц в виде таблиц (с дисплеем: таблица и друзья) не является межсерверным. Я не знаю, какие браузеры вам нужно поддерживать, но, конечно, IE6 этого не сделает. Но, если ваш целевой браузер делает все поддержку отображения: table, я могу дать вам несколько советов.

Вертикальный подход к центрированию, который вы ищете (с использованием макета таблицы), зависит от наличия TD с вертикальным выравниванием: среднее, а затем внутри этого элемента с одним блоком будет вертикально центрироваться. Поэтому я думаю, что вы хотите:

#parent { display:table-cell; vertical-align:middle; }
#child { /* nothing necessary, assuming it a DIV it already display:block */ }

Хорошо использовать табличную ячейку без окружения table-row и таблицы, браузер запрашивает необходимые элементы для упаковки таблицы.

Ответ 4

вот еще один способ, когда вы не знаете внутренний размер div или что-то еще, вы можете использовать% здесь и там, чтобы исправить "центрирование"....

Идея заключается в том, что ваше верхнее значение составляет половину высоты вашего дочернего элемента, чтобы создать иллюзию центрирования

Здесь код:

<div id="parent">
    <div id="child">
            hello
    </div>
</div>

и для стиля:

#parent {
   position: relative;
    height: 300px;
    width:200px;
    background-color:green;
}

#child {
   height: 50%;
   width: 50%;
    position:relative;
    top:25%;
    left:25%;
   background-color:red;
}

Здесь вы можете увидеть его в действии http://jsfiddle.net/Wabxv/