Как выровнять сайт по центру экрана


Выравниваем страницу сайта по центру монитора

В этой статье вы найдете простой метод выравнивания страницы вашего сайта по центру экрана, вне зависимости от его ширины.

В наше время все больше популярности набирают широкоформатные экраны, однако веб-ресурс не всегда должен занимать ширину всего монитора. Главным образом это зависит от дизайнерского решения. Схема реализации этого решения приведена ниже:

Решение

Реализация поставленной задачи заключается на принципе работы свойства margin – внешних отступов блока. В том случае, если блоку установить точное значение ширины, а отступы по бокам определить в автоматическом режиме (значение auto), то контейнер займет свое определенное место, установленное шириной, а оставшееся место распределится поровну для левого и правого отступа. Таким образом, достигается выравнивание блока по центру при любом значении ширины экрана. Код, на котором основывается наш способ, приведен ниже

HTML

<body> <div></div> </body>

CSS

body { background: #eee; margin:0px; padding:0px; } div { width: 300px; height: 300px; background: #5395f7; margin: 0px auto; }

Проверяем в браузере наш код

В каких браузерах работает?

Оценок: 6 (средняя 3.5 из 5)

Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)

Уровень сложности:

Средний

Еще интересное

javascript - Как выровнять сайт по центру экрана вверху / внизу и справа / слева?

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
.

javascript - Размещение элемента в центре экрана

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создайте своего работодателя
.

html - Выровнять SVG по центру экрана

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
.

css - Как разместить контент в центре экрана

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант
.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

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