CSS 26    CSS3 10    HTML 2    JavaScript 43    Wordpress 3    Блог 10    Инструменты 1    Не советую 1    Полезные ресурсы 4    Счетчики 1    Шпаргалки 6    Зарегистрироваться 246   Войти

Меню

Добро пожаловать, Гость! Вы можете Войти или Зарегистрироваться.

9

Размещение блока (div) по центру страницы

Jemand 130411
CSS

Один из многочисленных способов выравнивания блока (div) по центру страницы.
1. CSS

#center {
	top: 50%; /* Отступ в процентах от верхнего края окна */
	left: 50%; /* Отступ в процентах от левого края окна */
	width: 450px; /* Ширина блока */
	height: 450px; /* Высота блока */
	position: absolute; /* Абсолютное позиционирование блока */
	margin-top: -225px; /* Отрицательный отступ от верхнего края страницы, должен равняться половине высоты блока со знаком минус */
	margin-left: -225px; /* Отрицательный отступ от левого края страницы, должен равняться половине высоты блока со знаком минус */
}

2. HTML

<div id="center">
		<!-- Содержание блока -->
</div>

Демо

Рекламная пауза

» 9 комментариев

  1. А если ширина блока в %?

  2. Спасибо, хороший совет.

  3. вместо margin-top и margin-left писать просто top и left.

  4. если страницу изменить по высоте так, что высота дива не помещается, то смотрится коряво

  5. Если пользователь прокрутил страницу вниз, то 50% – будет, в вашем коде, именно от начала страницы и блок не будет виден на странице. Чтобы вывести блок по центру с учетом того, где юзер сейчас смотрит страницу, поможет только яваскрипт, иначе никак.
    Нужно вычислить смешение сначала scrollHeight, потом прибавить к нему нужное число, чтобы блок показался по центру текущего положения страницы.


Оставить комментарий