Содержание

Как выровнять div по центру в HTML — Примеры

Ранее были показаны способы вертикального выравнивания, теперь остановимся на горизонтальном.

text-align: center;

Свойство CSS text-align выравнивает содержимое тега и принимает значения

text-align: center;
по центру		text-align: justify; — по ширине, когда браузер добавляет пробелы между словами, чтобы не было отступов с краёв. text-align: justify; — по ширине выравнивается последняя или единственная строка
text-align: left;
по левому краю		text-align: right;
по правому краю

Если указать text-align: center для встроенного элемента [занимаемого только ширину содержимого], то ничего не произойдёт, поскольку тег не может себя двигать:
<span>текст</span>
текст

Если для блочного [занимаемого всю доступную ширину], то содержимое элемента переместиться в центр

<div>текст</div>

текст


В качестве содержимого может выступать и другой тег.
<div>
  <span>встроенный элемент <br /> в две строки</span>
</div>

встроенный элемент
в две строки


Помог при выравнивании модального окна на CSS:
<div>
  <div>обтекаемый <br /> блочный элемент</div>
</div>

обтекаемый
блочный элемент


А вот блочный тег как и при display: table никак не хочет становиться по середине, перемещается лишь его текст
<div>
  <div>блочный элемент <br /> фиксированной ширины</div>
</div>

блочный элемент
фиксированной ширины

margin: 0 auto;

Свойство margin решает проблему

<div>
  <div>блочный элемент <br /> определённой ширины</div>
</div>

блочный элемент
определённой ширины


Чтобы выровнять картинку по центру, нужно прописать, что она стала блочной без указания её width
<img src="URL_изо"/>

width можно не рассчитывать и при display: table

<div>
  <div>блочная <br /> таблица</div>
</div>

блочная
таблица

float

float не имеет значения center

float: left;
обтекание слева

float: right;
обтекание справа

Для старых браузеров, чтобы выравнять блок, не имеющий фиксированной ширины, можно воспользоваться методом, описанным тут [Студия Артемия Лебедева] http://nocode.in/aligning-text-smartly-in-css/

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

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

дизайна с фиксированной шириной. Давайте посмотрим на код страницы: 


<!DOCTYPE html >
<html>
    <head>
        <meta charset="utf-8" />
        <title>Главная страница</title>
        <style type ="text/css">
            body{
                margin: 0px; /* Убираем внешние отступы */
                padding: 0px; /* Убираем внутренние отступы */
            }

            #wrapper{
                position: absolute; /* Относительное позиционирование */
                border: 1px solid #000; /* Внешнея граница вокруг блока div */
                width: 1000px; /* Ширина блока div */
                min-height: 950px; /* Минимальная высота блока */
                margin-left: -500px; /* Внешний левый отступ. Отрицательное значение означает, что блок выходит за левого края браузера на 500px */
                left: 50%; /* Позиционирование относительно левого края окна браузера */
                background-color: #7AB8E9; /* Цвет фона для блока */
            }
        </style>
    </head>
    <body>
        <div >

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

У нас получилось страница, выровнена по центру окна браузера.

Разберем CSS код страницы

В первую очередь убрали внешние (margin) и внутренние(padding) отступы у блока body т.к. у каждого браузера изначально заданы разные значения этих свойств для блока body. Эти значения больше чем 0px, поэтому мы их убираем.

Создали блок div и задали ему идентификатор с именем wrapper. Этот блок и есть обертка для нашей страницы.

Для блока div задали абсолютное позиционирование на 50% относительно левого края окна браузера. Могли бы задать и фиксированное позиционирование (position:fixed;) она аналогична абсолютной позиционирований, но в данном случае не смогли бы прокручивать страницу вертикально, поэтому отказались от этого значения. Ширину страницы задали 1000px для того чтобы поместилась в разрешение экрана 1024. 24px оставили для полосы вертикальной прокрутки. В итоге страница вместе с полосой прокрутки занимает 1024px, что естественно подойдет для всех экранов, которые поддерживают это разрешение.

Задали отрицательное значение для внешнего отступа margin в размере -500px, это занимает половину из размера блока div. Это значение заставляет блока div двигаться в сторону левого края браузера, на расстояние 500px, половины из своей ширины. Смотрим, как это выглядит в браузере.

Для абсолютного позиционирования задали left:50%; что соответствует половину из ширины блока, для того что бы страница начала позиционирование с пол страницы. Это свойство вместе с отрицательным левым отступом, делают, что бы страница выравнивалась прямо по центру в любой разрешений экрана.

Если Вы не знакомы с отрицательными значениями свойства margin, то я вам рекомендую почитать статью Отрицательные значения внешних полей в CSS.

Вот, и все что я вам хотел рассказать о выравнивании страницы по центру окна браузера. Теперь вы знаете один из методов как решить данную проблему. Желаю вам больших успехов.

Похожие статьи:

Видео:

Понравилась статья?

Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.

Поделиться с друзьями:

Подписаться на новые статьи:

Поддержите пожалуйста мой проект!

%next_previous_article%

Если у Вас есть какие-то вопросы или предложения, то можете писать их в комментариях или мне на почту

[email protected]. И если Вы заметили какую-то ошибку в статье, то прошу Вас, сообщите мне об этом, и в ближайшее время я всё исправлю.

Добавляйтесь ко мне в друзья в:

Добавляйтесь в мои группы:

Подпишитесь на мои каналы:

Автор статьи: Мунтян Сергей

Копирование материалов с сайта sozdatisite.ru ЗАПРЕЩЕНО!!!

Дата добавления: %date%

Выравнивание элементов во Flex контейнере — CSS

Одной из причин быстрого роста популярности flexbox среди веб-разработчиков было то, что впервые были предоставлены адекватные возможности выравнивания. Он предоставил адекватное вертикальное выравнивание, и стало возможным, наконец, легко поместить элемент в центр по вертикали. В этом руководстве детально рассматривается, как выравнивание и распределение работают во Flexbox.

Для центрирования элемента по перекрёстной оси (в данном случае — вертикальной) используется свойство align-items. Для центрирования элемента по главной оси (в данном случае — горизонтально), используется свойство justify-content.

На примере ниже можно изменить размер контейнера или вложенного элемента, но элемент всегда останется по центру.

В этом руководстве рассматриваются следующие свойства:

  • justify-content — управляет выравниванием элементов по главной оси.
  • align-items — управляет выравниванием элементов по перекрёстной оси.
  • align-self — управляет выравниванием конкретного flex элемента по перекрёстной оси.
  • align-content — описывается в спецификации как “упаковка flex строк”; управляет промежутками между flex строками по перекрёстной оси.

Также будет рассмотрены авто-отступы для выравнивания элементов во flexbox.

Замечание: Свойства выравнивания во Flexbox помещены в отдельную спецификацию — CSS Box Alignment Level 3. Ожидается, что данная спецификация в конце концов заменит свойства, определённые во Flexbox Level One.

Свойства align-items и align-self управляют выравниванием flex элементов по перекрёстной оси: вертикальной для flex-direction установленным в row, и горизонтальной для flex-direction установленным в column.

Рассмотрим выравнивание по перекрёстной оси на простейшем примере. Если установить display: flex у контейнера, все дочерние элементы становятся flex элементами, выстроенными в ряд. Все они по вертикали примут размер самого высокого элемента, который станет определяющим вертикального размера. Если у flex контейнера задана высота, то все элементы растянутся до высоты контейнера, независимо от размера содержимого.

Все элементы становятся одной высоты, т.к. по умолчанию свойство align-items имеет значение stretch.

Другие возможные значения свойства:

  • align-items: flex-start
  • align-items: flex-end
  • align-items: center
  • align-items: stretch
  • align-items: baseline

В примере ниже значение свойств align-items установлено в stretch. Попробуйте другие значения для понимания их действия.

 

Выравнивание одного элемента при помощи 

align-self

Свойство align-items устанавливает align-self для всех flex элементов как для группы. Это означает, что можно явно указать значение align-self для конкретного элемента. Свойство align-self может принимать все те же значения, что и свойство align-items, а так же значение auto, которое сбросит значение, установленное в flex контейнере.

В следующем примере, у flex контейнера установлено align-items: flex-start, означающее, что все элементы будут выравнены по началу перекрёстной оси. У первого элемента с помощью first-child селектора установлено align-items: stretch; у следующего элемента с классом selected установлено align-self: center. Можно изменять значение align-items на контейнере или align-self на элементе для изучения их работы.8н

 

Изменение основной оси

До сего момента мы изучали поведение при flex-direction установленном в row, в языке, использующем написание сверху вниз. Это означает, что основная ось идёт горизонтально, а выравнивание по перекрёстной оси сдвигает элементы вверх или вниз.

Если изменить flex-direction на column, align-items и align-self будут сдвигать элементы влево или вправо.

Можно попробовать пример ниже, где установлено flex-direction: column.

 

До сих пор мы выравнивали элементы внутри flex-контейнера. Если содержимое вашего flex контейнера переносится на несколько строк, используйте свойство align-content для управления свободным пространством между строками. В спецификации это описано как упаковка flex-строк.

Чтобы свойство align-content работало, необходимо, чтобы в flex-контейнере было больше места, что требуется для отображения всего содержимого. Оно применяется ко всем элементам как группе, и управляет распределением свободного места и положением всей группы элементов внутри контейнера.

Свойство align-content принимает следующие значения:

  • align-content: flex-start
  • align-content: flex-end
  • align-content: center
  • align-content: space-between
  • align-content: space-around
  • align-content: stretch
  • align-content: space-evenly (не описано в спецификации Flexbox)

В примере ниже flex контейнер имеет высоту 400 пикселей — больше, чем необходимо для отображения всех элементов. Значение align-content установлено в space-between, означающее, что свободное пространство разделено между строками, расположенными вплотную к началу и концу контейнера по перекрёстной оси.

Попробуйте другие значения align-content для понимания принципа их работы.

 

Также можно сменить значение flex-direction на column и увидеть, как наше свойство работает в режиме колонок. Как и ранее, что увидеть работу свойства, у контейнера должно быть больше свободного места, чем требуется содержимому.

 

Замечание: значение space-evenly не определено в спецификации flexbox и добавлено позже в спецификацию Box Alignment. Поддержка браузерами этого значение не так широка, как значений определённым в спецификации flexbox.

В документации по justify-content на MDN приведено больше деталей о всех значениях и поддержке браузерами.

Теперь, когда мы увидели, как работает выравнивание по перекрёстной оси, можно посмотреть на главную ось. Здесь нам доступно только одно свойство — justify-content. Это обусловлено тем, что с элементами на  главной оси мы работаем только как с группой. Используя свойство justify-content, мы контролируем, что происходит со свободным пространством на главной оси, и требуется ли нам больше пространства, чем нужно для отображения наших элементов.

В нашем первом примере с использованием свойства display: flex, применённым к контейнеру, элементы отображаются как строка и выстраиваются в начале блока. Это обусловлено тем, что свойство justify-content имеет начальное значение flex-start. Все свободное место располагается в конце контейнера.

Свойство justify-content может принимать те же самые значения, что и align-content.

  • justify-content: flex-start
  • justify-content: flex-end
  • justify-content: center
  • justify-content: space-between
  • justify-content: space-around
  • justify-content: stretch
  • justify-content: space-evenly (не определено в спецификации Flexbox)

В примере ниже, свойству justify-content задано значение space-between. Все доступное пространство распределяется между элементами после их позиционирования в контейнере. Первый и последний элементы занимают положения в начале и в конце контейнера соответственно.

Если свойство flex-direction имеет значение column, то свойство justify-content распределит доступное пространство в контейнере между элементами.

 

Выравнивание и режим записи

Необходимо помнить, что при использовании свойств flex-start иflex-end элементы позиционируются в режиме записи. Если свойству justify-content задано значение start и стоит режим записи left-to-right (слева-направо), как в английском, то элементы выравниваются, начиная с левой стороны контейнера.

Однако, если задан режим записи right-to-left (справа-налево), как в арабском языке, то элементы будут выстраиваться с правой стороны контейнера.

В примере ниже свойству property задано значение rtl, которое изменяет порядок наших элементов. Вы можете удалить это свойство или изменить значение свойства justify-content, чтобы увидеть, как работает flexbox, когда отображение элементов начинается справа.

 

Начальное положение элементов поменяется, если вы измените значение свойства flex-direction — например установите row-reverse вместо row.

В следующем примере заданы следующие свойства: flex-direction: row-reverse и justify-content: flex-end. В языках с параметром записи ltr все элементы будут отображаться с левой стороны. Попробуйте изменить свойство flex-direction: row-reverse на flex-direction: row. Вы увидите, что теперь элементы отображаются реверсивно.

 

Может показаться немного запутанным, но главное правило, которое необходимо запомнить – до тех пор, пока вы не измените свойство flex-direction, элементы контейнера выстраиваются в режиме записи вашего языка (ltr или rtl). 

Вы можете сделать отображение элементов контейнера блочным, задав свойству flex-direction значение  column. Свойство flex-start будет отображать элементы в столбец сверху вниз. Таким образом, первый элемент будет первым параграфом.

Если вы зададите свойству flex-direction реверсивное значение, то элементы будут позиционироваться в обратном порядке. Так, свойство flex-start будет брать начало в конце контейнера. Первый элемент будет находится в конце строки, если задано строчное отображение элементов или в конце параграфа, если задано блочное отображение.   

Так как элементы, расположенные на главной оси, обрабатываются как группа, свойства justify-items или justify-self становятся недоступными. Тем не менее, существует способ отделить конкретный элемент или группу элементов от остальных, используя внешний отступ margin со значением auto. 

Распространённый пример — панель навигации, в которой отдельные важные элементы выровнены по правому краю, а основная группа элементов — по левому.

На первый взгляд может показаться, что этот пример использования свойства justify-self. Однако, рассмотрим следующий ниже пример. Имеется три элемента с одной стороны и два — с другой. Если бы мы могли использовать justify-self на элементе d, это также изменило бы выравнивание следующего элемента — e, что может противоречить первоначальному замыслу.

Вместо этого мы можем выбрать четвёртый элемент (d) и отделить его от первых трёх, задав ему значение auto для margin-left. Авто-margin заполнит всё доступное свободное место по своей оси. Тем же образом работает margin-right. Оба свойства со значениями auto отцентрируют блок, так как каждый из отступов будет пытаться занять максимум пространства.

В интерактивном примере ниже у нас имеется простой ряд из флекс-элементов и класс push с заданным margin-left: auto. Вы можете, например, попробовать удалить это значение или добавить класс другому элементу, чтобы увидеть, как работает этот метод. 

 

В начале этой статьи объясняется, что свойства выравнивания, которые в настоящее время содержатся в спецификации Flexbox Level 1, также включены в спецификацию Box Alignment Level 3, которая в дальнейшем может расширить эти свойства и значения. Мы уже видели, как это произошло с введением значения space-evenly для свойств align-content и justify-content.

Выравнивание во Flexbox также включает в себя другие методы создания пространства между элементами, такие как column-gap and row-gap, как показано в макете CSS Grid Layout. Включение этих свойств в Box Alignment означает, что в будущем мы также сможем использовать column-gap и row-gap во Flexbox разметке. Это означает, что вам не нужно будет использовать отступы, чтобы создать пространство между элементами.

Моё предложение заключается в том, чтобы при изучении выравнивания во Flexbox, делать это параллельно с выравниванием в Grid Layout. В обеих спецификациях используются свойства выравнивания, подобные Flexbox. Вы можете видеть, как эти свойства ведут себя при работе с сеткой в статье Box Alignment in Grid Layout, а также рассмотреть как выравнивание работает в этих спецификациях в статье Box Alignment Cheatsheet.

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

  • Выравнивание Коробки
  • Выравнивание Коробки в Flexbox (Гибкая Коробка)
  • Выравнивание Коробки в Grid Layout (Макет Сетки)

css fixed по центру экрана

На чтение 3 мин. Просмотров 52 Опубликовано

Элемент с position: fixed; фиксируется в рамках области просмотра страницы, будь то в окне браузера или в iframe , расстояние до края которой указано в свойствах top , right , bottom , left . Передвинуть его относительно своего расположения можно с помощью margin и transform . Размещение элемента над другими элементами правится с помощью свойства z-index .

После того, как свойство position примет значение fixed , размер элемента может измениться, а соседние элементы сдвинутся на освободившееся пространство.

«Приклеить» элемент, чтобы он не менял своего положения при прокрутке страницы

Элемент с position: fixed; не влияет на размер родителя.

Элемент с position: fixed; не влияет на положение соседей: цифры 20, 21, 22, … смещаются к цифре 19.

static 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 fixed 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39″ >

В отличии от элемента с position: absolute; без родителя с position не static , элемент с position: fixed; не меняет своего положения при скроллинге.

Сегодня урок на тему выравнивания блоков div с помощью технологии CSS по центру.

Здесь есть несколько моментов, которые не совсем просто воспринимаются. На одном из них мне бы хотелось сегодня остановиться.

Когда блоки идут в нормальном потоке, выровнять один, по центру, относительно родительского блока, в котом он находиться, не составляет особого труда.

Для этого используется стандартная CSS конструкция margin:auto.

Но, что делать, если блок, который нужно выровнять по центру имеет абсолютное (absolute) или фиксированное положение (fixed). Такая ситуация иногда бывает.

Т.е. в данном случае наш пример принимает следующий вид.

Для тех, кто любит смотреть видео, этот урок выложен в групее вконтакте.

Вступайте. А для тех, кто любит текст. Читаем ниже.

position:relative; — у родительского блока было добавлено, чтобы отсчет шел именно с него, а не с тэга

position:absolute; — собственно говоря, само абсолютное позиционирование.

После произведенной манипуляции margin:auto работать уже перестает.

Как быть? Как можно снова выровнять блок по центру?

Сегодня я расскажу о трюке, который используется в этом случае. На самом деле все достаточно просто, нужно только добавить два CSS-свойства для выравниваемого блока.

left:50%; — смещаем блок относительно родительского на 50% влево.

margin-left:-150px; — т.к. отсчет идет с левого верхнего края блока, то для полной ровности, половину блока нужно сместить влево, что мы и делаем отрицательным отступом.

Если ширина блока задается в процентах, то решение может быть следующим:

Если по центру нужно выровнять строку с текстом:

Дело в том, что, когда блоку присваивается свойство с position:absolute. Ширина блока с значением width:auto по умолчанию, становиться равной содержимому. Поэтому свойство text-align не будет работать. Чтобы все начало работать, нужно принудительно увеличить ширину до 100%.

Все, что было сказано выше про position:absolute аналогично можно применить и к блокам, которые имеют position: fixed.

Известно, что выровнить блок заданной ширины по центру по горизонтали можно с помощью свойства margin:0 auto. Но как поступить, если его еще надо выровнить по центру по вертикали.

На самом деле всё просто. Чтобы разместить по центру блок с заданной шириной и высотой, надо его абсолютно спозиционировать с left:50% и top:50% относительно экрана и отрицательным маргином сместить его назад на половину размера ширины и высоты дива.

Как видите, сначала мы задали html и body 100% высоту, чтобы они растянулись на весь экран, потом спозиционировали слой с left и top по 50% и отрицательным маргином сместили его назад на половинчатые размеры.

Выравнивание блока div со свойством position:absolute или fixed по центру.

Сегодня урок на тему выравнивания блоков div с помощью технологии CSS по центру.

Здесь есть несколько моментов, которые не совсем просто воспринимаются. На одном из них мне бы хотелось сегодня остановиться.

Когда блоки идут в нормальном потоке, выровнять один, по центру, относительно родительского блока, в котом он находиться, не составляет особого труда.

Для этого используется стандартная CSS конструкция margin:auto.

Но, что делать, если блок, который нужно выровнять по центру имеет абсолютное (absolute) или фиксированное положение (fixed). Такая ситуация иногда бывает.

Т.е. в данном случае наш пример принимает следующий вид.

Есть еще более современное решение этой проблемы — использование flexbox.

Подробнее здесь.

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

position:relative; — у родительского блока было добавлено, чтобы отсчет шел именно с него, а не с тэга <body>

position:absolute; — собственно говоря, само абсолютное позиционирование.


После произведенной манипуляции margin:auto работать уже перестает.

Как быть? Как можно снова выровнять блок по центру?

Сегодня я расскажу о трюке, который используется в этом случае. На самом деле все достаточно просто, нужно только добавить два CSS-свойства для выравниваемого блока.

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

left:50%;  — смещаем блок относительно родительского на 50% влево.

margin-left:-150px; — т.к. отсчет идет с левого верхнего края блока, то для полной ровности, половину блока нужно сместить влево, что мы и делаем отрицательным отступом.


Если ширина блока задается в процентах, то решение может быть следующим:

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

Если по центру нужно выровнять строку с текстом:

<p>Строка текста</p>

Дело в том, что, когда блоку присваивается свойство с position:absolute. Ширина блока с значением width:auto по умолчанию, становиться равной содержимому. Поэтому свойство text-align не будет работать. Чтобы все начало работать, нужно принудительно увеличить ширину до 100%.

Все, что было сказано выше про position:absolute аналогично можно применить и к блокам, которые имеют position: fixed.

Есть еще более современное решение этой проблемы — использование flexbox.

Подробнее здесь.

разместить объект точно по центру блока – Zencoder

Перевод небольшой статьи с замечательного сайта для веб-дизайнеров CSS-Tricks.

Статья посвящена одному интересному моменту — как правильно точно отцентрировать один объект с фиксированными размерами внутри другого. В принципе ничего сложного (и большого секрета) в этом нет, но статья мне понравилась, поэтому решил перевести и разместить у себя. Особенно хороши картинки — глядя на них, можно и текст не писать — все наглядно понятно. Далее — вольный перевод статьи Криса Койера:

На днях мне потребовалось создать страницу-заглушку для сайта. Мне необходимо было разместить изображение логотипа точно по центру экрана, а именно — отцентрированную по вертикали и горизонтали. Немного подумав, я задал для изображения класс centered и прописал для него правила:

.centered {
    position: fixed;
    top: 50%;
    left: 50%;
  }

Примечание переводчика:

Свойство fixed здесь задается по двум причинам. Первая — необходимо, чтобы изображение имело фиксированное положение на странице и не изменяло его при прокрутке в окне браузера. Второе — изображение должно располагаться точно по центру окна. Одновременно соответствовать обоим критериям может только одно свойство — fixed. Оно очень похоже на более известное absolute, но с одним отличием — объект с этим свойством не меняет своего положения при прокрутке страницы.

Но я уверен, что вы скажете — это еще не все, что необходимо сделать. Тот код, который я прописал, помещает верхний левый угол изображения посередине страницы, но не центр изображения по центру страницы:

Для того чтобы расположить картинку точно по центру, необходимо сместить ее влево на величину, равную половине ширины изображения и сместить вверх на величину, равную половине высоты изображения.

Оба смещения нужно сделать с помощью свойства margin-left и margin-top с отрицательными значениями. Код в итоге будет следующим:

.centered {
position: fixed;
top: 50%;
left: 50%;
margin: -50px 0 0 -100px;
}

В результате изображение разместиться точно по центру экрана:

На этом все.

css

Выравнивание div по центру экрана по вертикали и горизонтали — Bookamba блог

Голуби на картинке поста выбраны не случайно, если обратить внимание на того, что справа, даже он уже выровнен по вертикали и по горизонтали, а ваш Div – еще нет (:

Как выровнять блок по центру по горизонтали все знают и ни для кого не составит сложности это реализовать. Но когда дело касается того, как же выровнять блок по центру по вертикали – тут уже люди извращаются как могут.  Конечно с появлением flex выровнять div по вертикали больше не составляет труда, но flex еще не так хорошо поддерживается, как нам хотелось бы – поэтому часто возникает необходимость применять танцы с бубном.

Как же выровнять div с динамической высотой по вертикали

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

Итак, давайте разберем код по порядку. Существует несколько способов, как выровнять блок по вертикали. Лично мне нравится способ с имитированием таблицы. Так как в нашем случае мы хотим выровнять блок по центру, нужно предварительно растянуть body и html до 100 процентов в высоту. По умолчанию height у них auto.

body, html {
height: 100%;
}

Далее у нас общий врапер, в который все завернуто (по сути можно и без него)

.login-page-wraper {
height: 100%;
}

После чего, мы вкладываем два дива для того, что бы эмулировать поведение ячеек таблицы

.login-page-wraper .table-emulate {
display: table;
width: 100%;
height: 100%;
position: relative;
}

.login-page-wraper .table-cell-emulate {
display: table-cell;
width: 100%;
height: 100%;
vertical-align: middle;
}

Все, теперь блоки, которые будут находится внутри .table-cell-emulate, будут выравниваться по центру по вертикали.

Для выравнивания по горизонтали мы применяем стандартный прием с margin: 0 auto; только в нашем случае думаем заранее о том, что высоту окна браузера могут сжать или просмотреть на каком-то старом устройстве, поэтому добавляем отступы сверху и снизу по 70 пикселей, чтобы шапка и футер не прилипали, если высота окна браузера будет маленькой.

.login-page-wraper .login-form {
width: 400px;
margin: 70px auto;
}

Ну и конечно не забываем “прилепить” шапку и футер

.login-page-wraper header,
.login-page-wraper footer {
background: #eee;
padding: 8px 0;
position: absolute;
}

.login-page-wraper header {
top: 0;
left: 0;
width: 100%;
}

.login-page-wraper footer {
bottom: 0;
left: 0;
width: 100%;
}

Для этого делаем их абсолютно позиционируемыми и footer лепим вниз bottom: 0; А header наверх top: 0;

Конечно в наше время не стоит забывать и о адаптивности верстки, поэтому добавляем один медиазапрос:

@media only screen and (max-width : 450px) {
.login-page-wraper .login-form {
width: 100%;
padding: 0 15px;
}
}

Этот медиазапрос изменит ширину формы со статической на динамическую, в тот момент, когда ширина окна браузера станет меньше 450 пикселей, тем самым форма начнет растягиваться по ширине и верстка макета будет полностью адаптивной.

Посмотреть пример

html — центральная страница CSS на экране

Используйте это:

  наценка: 0 авто;
ширина: 400 пикселей;

альтернатива:

  наценка: 0 авто;
ширина: 50%;

другая альтернатива:

  # outer-div {
    маржа: 0 авто;
    ширина: 50%;
}

#inner div {
    / * вставьте сюда любой CSS, который хотите * /
}

ПРИМЕЧАНИЕ 1: При использовании поля : 0 авто , вам необходимо определить ширину, иначе она не будет центрирована.

ПРИМЕЧАНИЕ 2: Вам действительно следует поместить его в другое поле или сделать ширину страницы 100% (или ширину больше, чем поле).

ПРИМЕЧАНИЕ 3: Невозможно центрировать по вертикали с полем: авто авто. Это просто не сработает. См. Ниже решение этой проблемы:

Центрированный ящик по горизонтали и вертикали:

Работает в jsbin:
http://jsbin.com/OSUViFi/1/

Код (такой же, как jsbin выше):

стр.HTML

style.css 

  # outer-container {
    ширина: 100%;
    высота: 100%;
    дисплей: таблица;
    позиция: абсолютная;
    переполнение: скрыто;
}
# inner-container {
    дисплей: таблица-ячейка;
    вертикальное выравнивание: по центру;
}
# center-box {
    маржа: 0 авто;
    высота: 400 пикселей;
    ширина: 400 пикселей;
  фон: # 000;
}

Специально для ваших нужд (не включая вертикальное выравнивание, которое, похоже, вам не нужно):

Пример jsbin:
http: // jsbin.com / axEZOTo / 2

Код (такой же, как jsbin выше):

page.html

style.css 

  #container {
    ширина: 1000 пикселей;
    маржа: 0 авто;
    высота: 100%;
    фон: # 999;
}
# center-box {
    максимальная ширина: 70%;
    минимальная ширина: 200 пикселей;
    высота: 500 пикселей;
    маржа: 0 авто;
    фон: # 000;
}

Здесь самое маленькое значение — 200 пикселей, это число вы можете изменить на наименьшее количество, которое вы хотите, чтобы ваш ящик имел.

ПРИМЕЧАНИЕ:

Я наконец понял, что вы пытались сказать в своем плохо сформулированном вопросе.

Вы использовали только 600 пикселей в качестве примера, но вы действительно хотите, чтобы это был гибкий макет, который изменяется с размером экрана.

CSS: центрирующие элементы

CSS: центрирующие элементы

См. Также указатель всех советов.

Центрирующие предметы

Распространенной задачей CSS является центрирование текста или изображений.По факту, существует три вида центрирования:

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

Центрирующие строки текста

Самый распространенный и (следовательно) самый простой тип центрирования — это строк текста в абзаце или заголовке. CSS имеет свойство text-align для этого:

П {выравнивание текста: центр}
h3 {text-align: center}

отображает каждую строку в P или в h3 с центром между ее поля, например:

Все строки в этом абзаце по центру между полями абзаца благодаря значению ‘center’ свойства CSS ‘text-align’.

Центрирование блока или изображения

Иногда нужно центрировать не текст, а блок в целом. Или, говоря иначе: мы хотим левую и правое поле должно быть равным. Для этого нужно установить поля. на «авто». Обычно это используется с блоком фиксированной ширины, потому что если сам блок гибкий, он просто займет все доступная ширина. Вот пример:

P.blocktext {
    маржа слева: авто;
    маржа-право: авто;
    ширина: 8em
}
...

 Это скорее ...

Этот довольно узкий блок текста расположен по центру. Обратите внимание, что линии внутри блока не центрированы (они с выравниванием по левому краю), в отличие от предыдущего примера.

Это также способ центрировать изображение: превратить его в блок свой собственный и примените к нему свойства поля. Например:

IMG.displayed {
    дисплей: блок;
    маржа слева: авто;
    margin-right: auto}
...
...

Следующее изображение отцентрировано:

Вертикальное центрирование

CSS level 2 не имеет свойства для центрирования вещей вертикально.Вероятно, он будет на уровне CSS 3 (см. Ниже). Но даже в CSS2 вы можете центрировать блоки по вертикали, комбинируя несколько свойств. Хитрость заключается в том, чтобы указать, что внешний блок форматироваться как ячейка таблицы, потому что содержимое таблицы ячейку можно центрировать по вертикали .

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

DIV.container {
    мин-высота: 10em;
    дисплей: таблица-ячейка;
    вертикальное выравнивание: средний}
...


  
 Этот небольшой абзац ...

Этот небольшой абзац расположен по центру вертикально.

Вертикальное центрирование в CSS, уровень 3

CSS level 3 предлагает другие возможности. В это время (2014 г.) хороший способ центрировать блоки по вертикали без использования абсолютного позиционирование (которое может привести к наложению текста) все еще ниже обсуждение.Но если вы знаете, что перекрывающийся текст не будет проблема в вашем документе, вы можете использовать свойство ‘transform’, чтобы центрировать абсолютно позиционированный элемент. Например:

Этот абзац расположен по центру по вертикали.

Для документа, который выглядит так:


  
 Этот абзац…

таблица стилей выглядит так:

div.container3 {
   высота: 10em;
     позиция: относительная } / * 1 * /
div.container3 p {
   маржа: 0;
     позиция: абсолютная;  / * 2 * /
     верх: 50%;  / * 3 * /
     преобразование: перевод (0, -50%) } / * 4 * /

Основные правила:

  1. Сделайте контейнер относительно позиционированным, который объявляет, что это контейнер для абсолютно позиционированных элементов.
  2. Сделайте сам элемент абсолютно позиционированным.
  3. Поместите его наполовину в емкость с надписью «верх: 50%».(Примечание что 50% ‘здесь означает 50% высоты контейнера.)
  4. Используйте перевод, чтобы переместить элемент вверх вдвое. высота. (‘50% ‘в’ translate (0, -50%) ‘обозначает высоту сам элемент.)

Недавно (примерно с 2015 г.) стала еще одна техника доступен в нескольких реализациях CSS. Он основан на новом Ключевое слово flex для свойства display. Это ключевое слово имеет в виду для использования в графических пользовательских интерфейсах (GUI), но вас ничто не останавливает от использования его в документе, если документ имеет правильная структура.

Этот абзац расположен по центру по вертикали.

таблица стилей выглядит так:

div.container5 {
  высота: 10em;
    дисплей: гибкий; 
    align-items: center }
div.container5 p {
  маржа: 0}

Вертикальное и горизонтальное центрирование в CSS, уровень 3

Мы можем расширить оба метода, чтобы центрировать по горизонтали и вертикально одновременно.

Побочным эффектом абсолютного позиционирования абзаца является что тогда он будет ровно настолько широким, насколько он должен быть (если мы не дадим ему явная ширина, конечно).В приведенном ниже примере это именно то, что мы хотим: мы центрируем абзац всего одним словом («По центру!»), Поэтому ширина абзаца должна быть точно ширина этого слова.

Желтый фон показывает, что абзац на самом деле только настолько, насколько велико его содержание. Мы предполагаем ту же наценку, что и перед:


  
 По центру!

Таблица стилей аналогична предыдущему примеру в отношении до вертикального центрирования.Но теперь мы переместим элемент наполовину по всему контейнеру, с ‘left: 50%’, и в то же время время переместите его влево на половину его собственной ширины в ‘translate’ трансформация:

div.container4 {
    высота: 10em;
    position: relative}
div.container4 p {
    маржа: 0;
    фон: желтый;
    позиция: абсолютная;
    верх: 50%;
      осталось: 50%; 
      поле справа: -50%; 
    преобразовать: перевести ( -50%,  -50%)}

Следующий пример ниже объясняет, почему «margin-right: -50%» нужный.

Когда средство форматирования CSS поддерживает flex, это еще проще:

с этой таблицей стилей:

div.container6 {
  высота: 10em;
  дисплей: гибкий;
  align-items: center;
    justify-content: center }
div.container6 p {
  маржа: 0}

, то есть единственное дополнение — это «justify-content: center». Просто как ‘align-items’ определяет вертикальное выравнивание содержимого контейнера, ‘justify-content’ определяет горизонтальное выравнивание.(На самом деле это немного сложнее, так как их имена предлагаю, но в простом случае это работает именно так.) Побочный эффект из ‘flex’ заключается в том, что дочерний элемент, P в данном случае, является автоматически делается как можно меньше.

Центрирование в области просмотра в CSS уровня 3

Контейнером по умолчанию для абсолютно позиционированных элементов является область просмотра. (В случае браузера это означает окно браузера). Так центрировать элемент в области просмотра очень просто.Вот полный пример. (В этом примере используется синтаксис HTML5.)


  <стиль>
    тело {
        background: white}
    раздел {
        фон: черный;
        цвет белый;
        радиус границы: 1em;
        отступ: 1em;
          позиция: абсолютная; 
          верх: 50%; 
          осталось: 50%; 
          поле справа: -50%; 
          преобразование: перевод (-50%, -50%) }
  
  <раздел>
     
 Красиво по центру 
 
    
 Этот текстовый блок центрирован по вертикали.
 И по горизонтали, если окно достаточно широкое.