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