Горизонтальное и вертикальное выравнивание по центру(vertical-align: middle) для div с помощью html и css


Задача

Выровнять текст и блоки по вертикали и горизонтали, используя css и html.

Вертикальное выравнивание однострочных элементов — аналог vertical-align:middle

Часто бывает такое, что нужно выровнять вертикально по центру одну строку текста в блоке фиксированной высоты. Для этого достаточно просто задать высоту строки равной высоте блока:
<div style="height: 44px; line-height: 44px;">
     Текст, выравниваемый по центру вертикально.
</div>

Горизонтальное выравнивание div

Для этого существует замечательный трюк:
<div style="width: 444px; margin: 0px auto;">
     Див, выравниваемый по центру горизонтально.
</div>
Правда, есть у способа и недостатки. Во-первых, нужно указывать ширину блока в пикселах или процентах, а во вторых — трюк не всегда работает в ie, в зависимости от доктайпа.

Вертикальное и горизонтальное выравнивание div одновременно

Сейчас речь пойдет именно о выравнивании самого блока относительно родительского, а не о центрировании текста. Итак, если дочерний элемент имеет фиксированную ширину и высоту, его будет достаточно просто разместить прямо в середине родительского блока следующим образом:
<div> <!-- Это родительский блок произвольных размеров -->    
     <div style="width: 444px; height: 222px; position: relative; left: 50%; top: 50%; margin-left: -222px; margin-top: -111px;"> <!-- А это дочерний блок, который мы выравниваем -->
          Див, выравниваемый по центру родительского горизонтально и вертикально одновременно.
     </div>
</div>
Используя этот метод, значения margin-left и margin-top нужно задать равными половине значений width и height соответственно.

Почти как настоящий vertical-align в ie :)

Итак, если ни один из вышеописанных методов центрирования по вертикали вам не подошел, то этот способ для вас. Работает он точно так же как и настоящий vertical align.
HTML:
<div class="container"> <!-- блок-контейнер -->
     <div> <!-- блок с содержанием -->
          Элемент, который выравнивается вертикально внутри блока-контейнера.
     </div>  
     <div class="auxiliary"> </div> <!-- пустой вспомогательный блок -->
</div>
CSS:
.container {
      display: table-cell;
      vertical-align: middle; 
      height: 444px; width: 333px; border: 1px solid red; /* просто чтобы было видно ;) */
}
*+html .auxiliary {
      display: inline-block;
      vertical-align: middle;
      width: 0px;
      height: 100%;
}
*+html .container div {
      display: inline-block;
      vertical-align: middle;
}
*+html .container div, .auxiliary {
      display: inline;
}
 

Поделиться ссылочкой: