Всех приветствую. С горизонтальным выравниваем блоков в css вообще нет никаких проблем. А вот с вертикальным есть. Впрочем, проблемы эти решаются несколькими способами. Итак, сегодня я расскажу, как делать в css вертикальное выравнивание блоков.
Табличный метод
Суть его в чем: родительскому блоку вы задаете display: table, а его вложенному блоку, который нужно отцентрировать — display: table-cell. Таким образом он превращается как бы в ячейку. Ну а ячейки можно выравнивать по вертикали с помощью vertical-align: middle.
С помощью абсолютного позиционирования
Конечно же, с помощью абсолютного позиционирования вы можете практически все, что угодно. Фишка тут такая: задаем блоку-родителю относительное позиционирование, вложенному блоку задаем абсолютное с координатами 50% и 50% (top, left) и делаем отрицательный внешний отступ для элемента, равный высоте элемента разделенной на 2. То есть если высота вложенного блока 150 пикселей, то нужно сделать отрицательный отступ сверху в 75 пикселей. Если вам нужно отцентрировать блок также по горизонтали, то такой же отступ нужно высчитать и задать по горизонтали. Только основываясь не на высоте, а на ширине блока.
<div id = "b1">Блок
<div id = "child">ssss</div>
</div>
#b1 {position: relative;
background: #999;
width: 500px;
height: 300px;
}
#child {
position: absolute;
top: 50%;
left: 50%;
height: 150px;
width: 250px;
margin: -75px 0 0 -125px;
background: brown;
}
Вот такой результат:
Есть и немного другой способ сделать то же самое с помощью абсолютного позиционирования. Он проще, потому что высчитывать ничего не надо. Блоки те же, показываю только css код:
#b1 {
position: relative;
background: #999;
width: 500px;
height: 300px;
}
#child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 150px;
width: 250px;
margin: auto;
background: brown;
}
Вся фишка вот в чем — задаем все координаты (сверху, слева, снизу, справа). Задаем их нулевыми, как вы видите. Когда это сделано, остается прописать margin: auto. Можете проверить, результат идентичен.
Выравнивание текста
Ну а если вас интересует, как делать в css выравнивание по вертикали текста, то читайте эту статью. Там описано 3 рабочих способа, как это сделать.