Как выровнять body по центру css

Решение

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

body> div>div> body>

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

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

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

Как выровнять body по центру css

Частная коллекция качественных материалов для тех, кто делает сайты

• Creativo.one2000+ уроков по фотошопу
• Фото-монстр300+ уроков для фотографов
• Видео-смайл200+ уроков по видеообработке
• Жизнь в стиле «Кайдзен» Техники и приемы для гармоничной и сбалансированной жизни

• Главная»
• Уроки»
• CSS учебник, бесплатные уроки CSS для начинающих

Изучив рубрику «CSS», вы узнаете, как с помощью каскадных таблиц стилей (CSS) можно легко управлять дизайном сайта и упростить создание самого сайта. Данная рубрика заменит Вам полноценный «учебник по CSS».

Бесплатные уроки CSS для начинающих

Вдобавок к текстовым урокам по каскадным таблицам стилей, в данном разделе также представлены полезные уроки CSS для начинающих. Все материалы изложены в максимально простой и понятной форме, поэтому даже абсолютный новичок сможет быстро освоить все премудрости создания красивого оформления сайтов.

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.
Автор/переводчик: Станислав Протасевич
Сложность:
Создан: 8 Июня 2017 Просмотров: 34410 Комментариев: 0

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Автор/переводчик: Станислав Протасевич
Сложность:
Создан: 1 Июня 2017 Просмотров: 22691 Комментариев: 0

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
Автор/переводчик: Станислав Протасевич
Сложность:
Создан: 28 Мая 2017 Просмотров: 23045 Комментариев: 0

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Подскажите как выровнять сайт по центру экрана.

Вечер добрый, появился у меня вопрос по верстке, приходилось верстать не один сайт, но никогда не сталкивался с тем что макет нужно выровнять по центру экрана и по высоте и ширине. Подскажите как это сделать, ширина сайта будет min 1000px, max 1400px, высота 900px. В поиске пока подходящего ничего не нашел.

Хочешь все знать про SEO и создание сайтов? вступай (https://vk.com/pr_step_com).
На сайте с 21.04.2010
22 марта 2012, 16:00
body
На сайте с 28.02.2012
22 марта 2012, 16:10
Olldman:
body
Это понятно, а как быть с высотой, вы привели пример только с шириной.
На сайте с 21.04.2010
22 марта 2012, 16:21
А для вам высота? Она будет в зависимости от кол-ва контента.
На сайте с 28.02.2012
22 марта 2012, 16:23
Olldman:
А для вам высота? Она будет в зависимости от кол-ва контента.
Нет высота будет фиксированная. Это для главной страницы.
На сайте с 29.02.2012
22 марта 2012, 16:24
Высота у сайта резиновая. как сказал Olldman она зависит от контента. в css

 < 
margin: 0; 
padding: 0; 
border: 0; 
> 
 
HTML, body < 
width: 100%; 
height: 100%; 
> 
 
* HTML #container < 
height: 100%; 
> 
 
body < 
background: #fff;

На сайте с 01.01.2011
22 марта 2012, 18:30

Sirega85:
Вечер добрый, появился у меня вопрос по верстке, приходилось верстать не один сайт, но никогда не сталкивался с тем что макет нужно выровнять по центру экрана и по высоте и ширине. Подскажите как это сделать, ширина сайта будет min 1000px, max 1400px, высота 900px. В поиске пока подходящего ничего не нашел.

Вариантов много. Думаю основная сложность именно в вертикальном позиционировании, так что остальным пренебрегу. Приведу способ, который использую сам (допилить и сделать кроссбраузерным думаю не составит труда) HTML

  
 
  
1 
 
1 
 
1 
 
1 
 
1 
 
1 
 
1 
 
1 

body <
padding: 0;
margin: 0;
width:100%;
display: table;
vertical-align: middle;
height: 100%;
text-align: center;
>
#cross <
display: inline-block;
height:100%;
vertical-align: middle;
>
#container <
display: inline-block;
vertical-align: middle;
width: 1000px;
text-align: left;
>

LLIARK:
Высота у сайта резиновая. как сказал Olldman она зависит от контента.

 < 
margin: 0; 
padding: 0; 
border: 0; 
> 
 
HTML, body < 
width: 100%; 
height: 100%; 
> 
Либо у вас потерялся значимый кусок, либо ваш кусок не делает, ровным счетом, ничего. 
 
* HTML #container < 
height: 100%; 
> 
 
body < 
background: #fff;