Вертикальное центрирование div внутри другого div

Вместо того чтобы запутываться в сложном CSS, который трудно писать и поддерживать, а также требует тщательно проверки кроссбраузерной совместимости, я считаю лучшим вариантом отказаться от CSS и использовать удивительно простой HTML 1.0:

<table id="outerDiv" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td valign="middle" id="innerDiv">
        </td>
    </tr>
</table>

Это решение выполняет все задачи, которые хотел первоначальный автор вопроса, и при этом остается надежным и легким в поддержке.

Я лично предпочитаю использовать трюк с скрытым псевдоэлементом, чтобы охватить всю высоту внешнего контейнера и вертикально выровнять его с другим содержимым. У Криса Койера есть отличная статья по этой технике: http://css-tricks.com/centering-in-the-unknown/. Огромное преимущество этого подхода заключается в масштабируемости. Вам не нужно знать высоту содержимого или беспокоиться о том, что оно будет расти или уменьшаться. Это решение хорошо масштабируется 😃.

Вот пример с кодом CSS, который вам понадобится, и рабочим примером: http://jsfiddle.net/m5sLze0d/.

.center:before {
    content: ""; /* Создаем дополнительное пространство над элементом */
    display: inline-block;
    height: 100%;
    margin-right: -0.3em;
    vertical-align: middle;
}
.center_element {
    display: inline-block;
    float: none;
    vertical-align: middle;
    white-space: normal;
    text-align: left;
}

Если у вас есть вопросы или нужна помощь, не стесняйтесь задавать их!

Вертикальное центрирование элементов div внутри другого div

Просто установите для контейнера display: table, а для внутренних элементов — display: table-cell. Установите height для контейнера, а затем задайте vertical-align: middle для внутренних элементов. Этот метод совместим с браузерами начиная с IE9.

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

.cn {
    display: table;
    height: 80px;
    background-color: #555;
}

.inner {
    display: table-cell;
    vertical-align: middle;
    color: #FFF;
    padding-left: 10px;
    padding-right: 10px;
}

<div class="cn">
    <div class="inner">Элемент 1</div>
    <div class="inner">Элемент 2</div>
</div>

Когда высота вашего внешнего элемента не задана (по умолчанию auto), вы можете задать отступы (padding) для внутреннего див элемента сверху и снизу, чтобы сделать его вертикально центрированным:

<div>
    <div style="padding-top:20px; padding-bottom:20px">
        <!--контент-->
    </div>
</div>

Таким образом, отступы сверху и снизу создадут эффект центровки контента внутри родительского элемента.

Вертикальное центрирование div внутри другого div

Для того чтобы вертикально центрировать элемент (в данном случае #innerDiv) внутри родительского элемента (#outerDiv), вы можете использовать CSS-свойство transform совместно с position: absolute. Вот пример кода:

#outerDiv {
  width: 500px;
  height: 500px;
  position: relative;
  background-color: lightgrey;  
}

#innerDiv {
  width: 284px;
  height: 290px;
  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */	
  
  background-color: grey;
}

<div id="outerDiv">
  <div id="innerDiv"></div>
</div>

Объяснение

• position: relative у родительского div (#outerDiv) устанавливает контекст позиционирования для внутреннего div (#innerDiv).
• position: absolute у внутреннего div позволяет ему позиционироваться относительно родителя с использованием свойств top и left.
• top: 50% и left: 50% устанавливают начальную позицию внутреннего div в центр родительского div, но не учитывают его размер.
• transform: translate(-50%, -50%) сдвигает внутренний div на половину его ширины и высоты, что помогает добиться истинного центрирования.

Таким образом, этот подход обеспечивает адаптивное центрирование элементa в родительском контейнере любой высоты и ширины.