Вертикальное центрирование блока средствами CSS, или «Сложности верстки»
Как то раз… Впрочем сразу к делу. Была нужда сделать абсолютное центрирование элемента, по вертикали и горизонтали. Отцентрировать элемент по горизонтали не составляет ничего сложного, а вот одновременно с вертикалью… Но решение я все же нашел.
Для наглядности центрировать блок будем относительно элемента
. Сперва устанавливаем ширину и высоту элемента, в котором разместим наш блок (это понадобится для любого элемента, в котором будем что-то центрировать), а затем еще обнулим значения отступов на случай, если у должен быть какой-нибудь фон.В CSS.
1 2 3 4 5 6 7 8 9 10 11 12 13 | html { margin:0; padding:0; width:100%; height:100%; } body { margin:0; padding:0; width:100%; height:100%; background:#000; } |
Теперь же приступим непосредственно к задаче.
В примере я использую блок размерами 300*200px.
1 2 3 | <div class="page"> Содержимое. </div> |
А теперь в CSS.
1 2 3 4 5 6 7 8 9 10 | .page { background:#CCC; width:300px; height:200px; position:absolute; top:50%; left:50%; margin-top:-100px; margin-left:-150px; } |
Здесь мы указываем абсолютное позиционирование блока, левый верхний угол размещаем по центру окна, а затем смещаем блок вверх и влево с помощью отрицательных значений margin, которые равны половине высоты и ширины блока, соответственно.
Тут почти тоже самое, поэтому я размещу только CSS код.
1 2 3 4 5 6 7 8 | .page { background:#CCC;/* для наглядности */ width:50%; height:50%; position:absolute; top:25%; left:25%; } |
На этот раз для позиционирования блока используем лишь координаты его левого верхнего угла. Вычитаем из общей высоты внешнего блока (в начале статьи решили что это будет
) высоту центрируемого блока (100% — 50% = 50%), делим ее пополам и получаем top:25%. Также поступаем с шириной и соответственно отступом слева (в примере: left:25%).P.S.
Остается добавить, если внутри нашего блока будет что-то фиксированного размера (например изображение), он и его содержимое будут центрироваться пока его размеры больше, либо равны размерам содержимого. Блок будет с позиционирован точно так, как мы ему указали в CSS, но отступы от границы окна до того, что находится внутри блока по вертикали не будут одинаковыми, и отступы по горизонтали тоже, т.е. центрирование нарушится.