Выравниваем блок по центру страницы
Очень часто стоит задача выровнять блок по центру страницы / экрана, да ещё и так, чтобы без ява-скрипта, без задания жёстких размеров или отрицательных отступов, ещё чтобы и скроллбары работали у родителя, если блок превышает его размеры. В сети ходят достаточно много однообразных примеров как выровнять блок по центру экрана. Как правило большинство из них основаны на одних принципах.
Ниже представлены основные способы решения задачи, их плюсы и минусы. Чтобы понимать суть примеров, рекомендую уменьшить высоту / ширину окошка Result в примерах по указанным ссылкам.
Вариант 1. Отрицательный отступ.
Позиционируем блок атрибутами top и left на 50%, и заранее зная высоту и ширину блока, задаём отрицательный margin, который равен половине размера блока. Огромным минусом данного варианта является то, что нужно подсчитывать отрицательные отступы. Так же блок не совсем корректно ведёт себя в окружении скроллбаров — он попросту обрезается так как имеет отрицательные отступы.
.parent < width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; >.block < width: 250px; height: 250px; position: absolute; top: 50%; left: 50%; margin: -125px 0 0 -125px; img < max-width: 100%; height: auto; display: block; margin: 0 auto; border: none; >> Вариант 2. Автоматический отступ.
Менее распространённый, но схожий с первым. Для блока задаём ширину и высоту, позиционируем атрибутами top right bottom left на 0, и задаём margin auto. Плюсом данного варианта являются рабочие скроллбары у родителя, если у последнего задана 100% ширина и высота. Минусом данного способ является жёсткое задание размеров.
.parent < width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; >.block < width: 250px; height: 250px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; img < max-width: 100%; height: auto; display: block; margin: 0 auto; border: none; >> Вариант 3. Таблица.
Задаём родителю табличные стили, ячейке родителя устанавливаем выравнивание текста по центру. А блоку задаём модель строчного блока. Минусами мы получаем не рабочие скроллбары, и в целом не эстетичность «эмуляции» таблицы.
.parent < width: 100%; height: 100%; display: table; position: absolute; top: 0; left: 0; .inner < display: table-cell; text-align: center; vertical-align: middle; >> .block < display: inline-block; img < display: block; border: none; >> Чтобы добавить скролл в данный пример, придётся добавить в конструкцию ещё один элемент.
Пример: jsfiddle.net/serdidg/xkb615mu.
Вариант 4. Псевдо-элемент.
Данный вариант лишён всех проблем, перечисленных у предыдущих способов, а так же решает первоначально поставленные задачи. Суть состоит в том, чтобы у родителя задать стили псевдо-элементу before, а именно 100% высоту, выравнивание по центру и модель строчного блока. Так же само и у блока ставится модель строчного блока, выравнивание по центру. Чтобы блок не «падал» под псевдо-элемент, когда размеры первого больше чем родителя, указываем родителю white-space: nowrap и font-size: 0, после чего у блока отменяем эти стили следующими — white-space: normal. В данном примере font-size: 0 нужен для того, чтобы убрать образовавшийся пробел между родителем и блоком в связи с форматированием кода. Пробел можно убрать и иными способами, но лучшим считается просто его не допускать.
.parent < width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; white-space: nowrap; text-align: center; font-size: 0; &::before < height: 100%; display: inline-block; vertical-align: middle; content: ''; >> .block < display: inline-block; white-space: normal; vertical-align: middle; text-align: left; img < display: block; border: none; >> либо, если вам нужно, чтобы родитель занимал только высоту и ширину окна, а не всей страницы:
.parent < position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: auto; white-space: nowrap; text-align: center; font-size: 0; &::before < height: 100%; display: inline-block; vertical-align: middle; content: ''; >> .block < display: inline-block; white-space: normal; vertical-align: middle; text-align: left; img < display: block; border: none; >> Вариант 5. Flexbox.
Одним из самых простых и элегантных способов является использования flexbox. Но имейте ввиду, что центральное позиционирование сохраняется даже если родительский блок меньше дочернего, последний будет выходить за рамки и обрезаться.
.parent < width: 100%; height: 100%; position: fixed; top: 0; left: 0; display: flex; align-items: center; align-content: center; justify-content: center; overflow: auto; >.block < background: #60a839; img < display: block; border: none; >> В случае, если при уменьшении родительского блока дочерний не должен обрезаться по краям, используйте авто маржины:
.parent < width: 100%; height: 100%; position: fixed; top: 0; left: 0; display: flex; overflow: auto; >.block < margin: auto; background: #60a839; img < display: block; border: none; >> Вариант 6. Transform.
Подходит в случае если мы ограничены структурой, и нет возможности манипулировать родительским элементом, а блок выровнять как-то нужно. На помощь придёт css функция translate() . При значение 50% абсолютное позиционирование расположит верхний левый угол блока точно по центру, затем отрицательное значение translate сдвинет блок относительно своих собственных размеров. Учтите, что могут всплыть негативные эффекты в виде размытых граней или начертания шрифта. Также подобный способ может привести к проблемах с вычислением положения блока с помощью java-script’а. Иногда для компенсации потери 50% ширины из-за использования css свойства left может помочь заданное у блока правило: margin-right: -50%; .
.parent < width: 100%; height: 100%; position: fixed; top: 0; left: 0; overflow: auto; >.block < position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); img < display: block; >> Вариант 7. Кнопка.
Пользователь azproduction предложил вариант, где блок обрамляется в тег button. Кнопка имеет свойство центрировать всё, что находится у неё внутри, а именно элементы строчной и блочно-строчной (inline-block) модели. На практике использовать не рекомендую.
.parent < width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; background: none; border: none; outline: none; appearance: none; >.block < display: inline-block; img < display: block; border: none; >> Бонус
Используя идею 4-го варианта, можно задавать внешние отступы для блока, и при этом последний будет адекватно отображаться в окружении скроллбаров.
Пример: jsfiddle.net/serdidg/ugnp8ry7.
Так же можно выравнивать картинку по центру, и в случае если картинка больше родителя, масштабировать её по размеру родителя.
Пример: jsfiddle.net/serdidg/Lhpa1s70.
Пример с большой картинкой: jsfiddle.net/serdidg/tor2yudn.
Как выровнять слой по центру веб-страницы?
Выровнять блочный элемент заданной ширины по центру горизонтали веб-страницы.
Решение
По умолчанию ширина блочного элемента принимает значение auto , и он, как правило, занимает всю доступную ширину. Поэтому описанным методом по центру можно выровнять только такой элемент, у которого явно задана ширина в процентах или пикселах. После чего к стилю слоя следует добавить отступ слева (стилевое свойство margin-left ) и справа ( margin-right ) со значением auto . Впрочем, также можно воспользоваться универсальным свойством margin со значением auto (пример 1).
Пример 1. Выравнивание слоя по центру
HTML5 CSS 2.1 IE Cr Op Sa Fx
Выравнивание слоя по центру
Результат примера показан на рис. 1.
Рис. 1. Слой, выровненный по центру
HTML по теме
CSS по теме
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?- Как открыть ссылку в новом окне?
Как отцентровать страницу в html
В этой статье вы найдете простой метод выравнивания страницы вашего сайта по центру экрана, вне зависимости от его ширины.
В наше время все больше популярности набирают широкоформатные экраны, однако веб-ресурс не всегда должен занимать ширину всего монитора. Главным образом это зависит от дизайнерского решения. Схема реализации этого решения приведена ниже: 
Решение
Реализация поставленной задачи заключается на принципе работы свойства margin — внешних отступов блока. В том случае, если блоку установить точное значение ширины, а отступы по бокам определить в автоматическом режиме (значение auto), то контейнер займет свое определенное место, установленное шириной, а оставшееся место распределится поровну для левого и правого отступа. Таким образом, достигается выравнивание блока по центру при любом значении ширины экрана. Код, на котором основывается наш способ, приведен ниже HTML
body> div>div> body>
body background: #eee; margin:0px; padding:0px; > div width: 300px; height: 300px; background: #5395f7; margin: 0px auto; >
Проверяем в браузере наш код
В каких браузерах работает?
6.0+
9.5+
3.1+
2.0+
Как центрировать вебсайт с помощью CSS
Центрирование вебсайта является основной многих CSS схем расположения. Существует множество разных способов и техник осуществления этого, однако в нашем уроке я расскажу Вам про методику использующую только CSS. Вам не надо будет бороться с процентами и Ваш сайт будет работать во всех современных браузерах.
Для начала необходимо будет сбросить установленные по умолчанию браузерами расстояния. У каждого браузера есть встроенные таблицы стилей, которые загружаются автоматически и являются основой для любых других таблиц стилей. У Firefox, например, по умолчанию значение margin для тега body равняется 8-ми пикселям. Ниже представлен самый простой способ обнулить все необходимые для нашего примера значения.
Хочу заметить, что существуют более продвинутые варианты сброса, но для нашего урока будет достаточно и этого.
* < margin:0;
padding:0;
>
Я буду использовать для нашего урока слой с идентификатором “wrapper”. Вы можете задать любую ширину (но помните о расширении мониторов Ваших посетителей). Я решил сделать ширину 960 пикселей, что подходит для разрешений выше средних (1024х768). Снизу Вы можете увидеть структуру страницы:
Для начала мы назначим слою #wrapper стиль, который будет центрировать его в браузере. Это сделано используя параметр margin. Не забудьте указать ширину слоя #wrapper или же элемент не будет центрирован. Трудно центрировать то, что занимает 100% ширины. Для удобства тестирования Вам необходимо также назначить другой цвет фона и высоту к слою #wrapper. Это поможет Вам увидеть результат.
#wrapper width:960px;
margin:0 auto;
>
С Internet Explorer не все так просто. Для правильного результата нам необходимо добавить еще следующий стиль (необходимо выровнять текст по центру, для того чтобы слой выровнялся по центру в Internet Explorer):
body text-align:center; /*For IE6 Shenanigans*/
>
Тег body включает в себя wrapper, и поэтому выравнивание текста передается и на него. Обычно необходимо, чтоб текст был слева, поэтому нам необходимо добавить это условие в стиль #wrapper:
#wrapper width:960px;
margin:0 auto;
text-align:left;
>
Все — мы закончили! Этот маленький блок CSS поможет Вам центрировать любой сайт, только подстройте ширину под себя. Весь код выглядит так:
* <
margin:0;
padding:0;
>
body <
text-align:center; /*For IE6 Shenanigans*/
>
#wrapper <
width:960px;
margin:0 auto;
text-align:left;
>
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.buildinternet.com
Перевел: Максим Шкурупий
Урок создан: 24 Марта 2009
Просмотров: 87414
Правила перепечатки
5 последних уроков рубрики «CSS»
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.