Как выровнять по центру элемент css: Выравнивание по центру в CSS

CSS: элемент в центре — dr.Brain

Эта статья будет полезна для тех, кто только начинает свой путь в веб-разработке. Выравнивание элемента по центру — достаточно распространенная задача, но каждый из нас все равно когда-то испытывал связанные с этим затруднения и искал оптимальные способы выравнивания по центру одного блока относительно другого c помощью Google или Stackoverflow. Несомненно, это простая задача. Однако, наличие большого количества элементов и стилей зачастую приводит к обидным ошибкам.

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

Text-align

Метод text-align: center, пожалуй самый распространенный. Обычно он используется для горизонтального выравнивания по центру текста. Кроме того, он успешно используется и для div.

Как это делается?

1. вокруг элемента, который нужно выровнять по центру, создайте родительский блок (обычно он называется wrapper или container),
2. задайте для этого (родительского) элемента CSS-свойство text-align: center,
3. для выравниваемого элемента создайте свойство display: inline-block.

В примере для синего квадрата есть блок-обертка blue-square-container, для которого определено выравнивание текста по центру text-align: center, а для самого квадрата есть свойство display: inline-block.

Следует обратить внимание на то, что по умолчанию для свойства display div получает значение block и поэтому занимает всю доступную ширину 100% и не выравнивается по правилам строчных элементов.

В свою очередь для inline-block элемента:

1. ширина определяется содержимым или установленным фиксированным значением,
2. выравнивание относительно родительского блока происходит по правилам, установленным для строчных элементов.

Margin: auto

Другой распространенный способ центрирования блока по горизонтали связан с автовырвниванием левого и правого внешних отступов (например: margin: 0 auto). В этом случае не имеет значения: есть ли родительский элеменет и что с ним происходит.

Мы просто применяем margin: 0 auto к желтому блоку, и это будет работать, если у выравниваемого элемента есть фиксированная ширина.

margin: 0 auto — короткая запись CSS-свойств, определяющая верхний и нижний внешние отступы равными 0, и автоматическое определение ширины для левого и правого внешних отступов.

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

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

Еще один интересный прием — установить значение auto только для margin-left или только для margin-right, что позволит сместить элемент, соответственно, вправо или влево (попробуйте).

Абсолютное позиционирование

Элемент с абсолютным позиционированием можно разместить в любом месте страницы, но с одной особенностью.

Элемет с абсолютным позиционированием выпадает из потока страницы. То есть остальные элементы страницы ведут себя так, будто абсолютно позиционированного элемента вовсе не существует.

Почему это важно?

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

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

1. установить элементу свойство position: absolute,
2. применить свойство left: 50%,
3. установить margin-left равным половине ширины элемента с отрицательным значением.

В данном случае, для этого примера создан зеленый квадрат с такими же размерами, как и в остальных случаях, то есть ширина равна 100px.

Свойства position: absolute и left: 50% указывают браузеру на необходимость сместить элемент на 50% влево. Но в этом случае на отметке 50% будет находиться левый край центрируемого элемента, а не его середина.

Наконец, для того, чтобы выровнять элемент по центру, мы смещаем его влево на половину ширины, за счет margin-left с отрицательным значением.

Следует помнить, что расчет положения элемента с абсолютным позиционированием осуществляется относительно любого из родительских элементов с установленным свойством “position: relative” или относительно страницы при их отсутствии.

Transform/translate

До сих пор мы изучали методы выравнивания элементов по горизонтали. Но что делать, если элемент должен находиться точно в центре страницы (как по горизонтали, так и по вертикали).

Проделаем это с красным квадратом из второго примера (смотри выше).

Хотя мы все еще применяем абсолютное позиционирование и margin-left: 50%, появляются и два новых CSS-свойства.

Устанавливая верхний внешний отступ равным 50%: margin-top: 50%, мы смещаем верхний край элемента к центру. Но, аналогично предыдующему примеру, в центре по вертикали оказывается верхний край элемента, а не его середина.

Вот почему нам нужно еще одно свойство, которое называется transform

С помощью transform можно делать разные крутые штуки, в том числе: смещение, ротацию, масштабирование. Но в данном случае нас интересует именно смещение (translate).

Создаем для центрируемого элемента свойство transform: translate(-50%, -50%), и…

Наш красный квадрат находится в центре как по горизонтали, так и по вертикали страницы.

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

Flexbox

Flexbox — одна из популярных моделей позиционирования и выравнивания элементов на странице.

Если Вы не знакомы с flexbox, воспользуйтесь Flexbox Froggy — это увлекательный и веселый интерактивный способ изучения всех возможностей модели flexbox.

Для того, чтобы разместить элемент в центре (по горизонтали и вертикали) с помощью flexbox, нужно выполнить следующие действия:

1. HTML, body и родительский контейнер должны иметь высоту 100%,
2. для родителського контейнера нужно установить display: flex,
3. так же для родительского контейнера нужно установить align-items: center,
4. еще для родительского контейнера нужно установить justify-content: center.

Устанавливая display: flex, мы создаем flex-контейнер.

align-items: center определяет вертикальное выравнивание всех дочерних элементов по центру родительского.

justify-content: center по действию подобен предыдущему свойству, но работает в другом направлении — горизонтальном.

Этот метод хорош тем, что отлично подходит для адаптивной верстки и не требует вычисления внешних отступов.

Спасибо за внимание.

Перевод статьи Stephen Sun “How to center things with style in CSS “.

CSS: выравнивание по центру

CSS: выравнивание по центру

Центрирование

Общая функция CSS — центрирование текста или изображения. Фактически, существует три вида центрирования:

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

Центрирование строк текста

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

P { text-align: center }
h3 { text-align: center }

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

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

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

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

P.blocktext {
    margin-left: auto;
    margin-right: auto;
    width: 6em
}
...
<P>Этот довольно ...

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

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

IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto }
...
<IMG src="..." alt="...">

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

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

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

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

DIV.container {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle }
...
<DIV>
  <P>Этот маленький абзац...
</DIV>

Этот маленький абзац центрирован вертикально.

Центрирование по вертикали в CSS уровня 3

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

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

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

<div class=container3>
  <p>Этот абзац…
</div>

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

div.container3 {
   height: 10em;
   position: relative }              /* 1 */
div.container3 p {
   margin: 0;
   position: absolute;               /* 2 */
   top: 50%;                         /* 3 */
   transform: translate(0, -50%) }   /* 4 */

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

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

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

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

таблица стилей выглядит следующим образом:

div.container5 {
  height: 10em;
  display: flex;
  align-items: center }
div.container5 p {
  margin: 0 }

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

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

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

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

<div class=container4>
  <p>Центр!
</div>

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

div.container4 {
    height: 10em;
    position: relative }
div.container4 p {
    margin: 0;
    background: yellow;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) }

Следующий пример объясняет, зачем требуется правило ‘margin-right: -50%’.

Когда форматер CSS поддерживает ‘flex’, всё становится ещё легче:

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

div.container6 {
  height: 10em;
  display: flex;
  align-items: center;
  justify-content: center }
div.container6 p {
  margin: 0 }

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

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

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

<html>
  <style>
    body {
        background: white }
    section {
        background: black;
        color: white;
        border-radius: 1em;
        padding: 1em;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%) }
  </style>
  <section>
    <h2>Красиво выровнен по центру</h2>
    <p>Этот текстовый блок выровнен вертикально по центру.
    <p>И горизонтально, если окно достаточно широкое.
  </section>

Вы можете увидеть результат в отдельном документе.

Правило ‘margin-right: -50%’ необходимо для компенсации ‘left:
50%’. Правило ‘left’ уменьшает доступную для элемента ширину на 50%. Поэтому визуализатор постарается сделать линии длиною не более половины ширины контейнера. Указав на то, что правое поле элемента находится правее на ту же самую величину, отметим, что максимальная длина линии снова равняется ширине контейнера.

Попробуйте изменить размер окна: вы увидите, что каждое предложение находится на одной строке, когда окно достаточно широкое. Только тогда, когда окно слишком узкое для всего предложения, это предложение будет разбито на несколько строк. Когда вы удалите правило ‘margin-right: -50%’ и снова измените размер окна, вы заметите, что предложения будут уже разбиты, хотя окно все еще шире строк текста в два раза.

(Использование свойства ‘translate’ для центрирования в области просмотра было впервые предложено “Charlie” в ответе на сайте Stack Overflow.)

Created 5 May 2001;
Last updated

Выравнивание слоя по центру | htmlbook.ru

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

Когда речь идет об использовании слоев, то для выравнивания в нашем распоряжении
имеется несколько способов — с помощью отступов, через позиционирование,
а также используя атрибут align тега <div>.

Использование отступов

Если добавить отступ к слою слева с помощью свойства margin-left,
то визуально слой сместится на указанное значение вправо. Зная ширину слоя,
его можно сместить так, чтобы слой располагался по центру веб-страницы. Для
чего от 100%, составляющих общую доступную ширину, надо отнять ширину слоя
в процентах и полученное значение разделить пополам. Результат и будет значением
свойства margin-left (пример 1).

Пример 1. Использование margin-left

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Выравнивание</title>
  <style type="text/css">
   #centerLayer {
    margin-left: 30%; /* Отступ слева */
    width: 40%; /* Ширина слоя */
    background: #fc0; /* Цвет фона */
    padding: 10px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>
  <div>
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
   nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  </div>
 </body>
</html>

Как вариант, можно не указывать ширину, а регулировать ее с помощью отступа
слева и справа (пример 2).

Пример 2. Использование отступов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Выравнивание</title>
   <style type="text/css">
    #centerLayer {
     margin-left: 30%; /* Отступ слева */
     margin-right: 30%; /* Отступ справа */
     background: #fc0; /* Цвет фона */
     padding: 10px; /* Поля вокруг текста */
    }
   </style>
  </head>
  <body>
   <div>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
    nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
   </div>
  </body>
</html>

В данном примере показано размещение слоя шириной 40% по центру.
Хотя сама ширина никак напрямую не задается, она определяется значением свойств
margin-left и margin-right. Они устанавливают отступ слева и справа,
чтобы слой располагался по середине, их значения должны быть равны.

Следующий способ более универсален и уже не зависит от того, какие единицы
измерения используются для установки ширины. Для этого требуется задать отступ слева и справа для слоя равным auto через стилевые свойства margin-left и margin-right или универсальное свойство margin (пример 3).

Пример 3. Применение значения auto

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Выравнивание</title>
  <style type="text/css">
   #centerLayer {
    width: 400px; /* Ширина слоя в пикселах */
    margin: 0 auto; /* Отступ слева и справа */
    background: #fc0; /* Цвет фона */
    padding: 10px; /* Поля вокруг текста */
    text-align: left; /* Выравнивание содержимого слоя по левому краю */
   }
  </style>
 </head>
 <body>
   <div>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
    nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
   </div>
  </body>
</html>

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

Атрибут align тега <div>

Еще один способ размещения по центру вообще не требует использования никаких
стилей и связан с атрибутом align тега <div>.
Указывая значение center, заставляем содержимое слоя выравниваться по его
центру. Поэтому необходимо создать два слоя, один из которых будет служить
контейнером для другого, как показано в примере 4.

Пример 4. Атрибут align

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Выравнивание</title>
  <style type="text/css">
    #centerLayer {
     width: 400px; /* Ширина слоя в пикселах */
     background: #fc0; /* Цвет фона */
     padding: 10px; /* Поля вокруг текста */
     text-align: left; /* Выравнивание по левому краю */
    }
   </style>
  </head>
  <body>
  <div align="center">
    <div>
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
     nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
    </div>
  </div>
 </body>
</html>

Опять же, как и в случае использования свойства text-align,
размещаться по центру будет и текст внутри слоя. Поэтому следует насильно
задать ему необходимое выравнивание через стили. Ширину слоя-контейнера задавать
не требуется, она будет вычисляться автоматически и занимать все доступное
пространство веб-страницы.

Абсолютное позиционирование
слоя

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

Вначале следует указать ширину и высоту слоя с помощью width и
height. Размеры можно задавать в пикселах, процентах или других единицах.
Ширину, например, можно определить в процентах, а высоту в пикселах. Из-за
этой особенности предлагаемый метод размещения по центру является наиболее
универсальным.

Следующий шаг — задаем абсолютное позиционирование слоя через
position: absolute. Положение слоя следует определить как 50% по горизонтали
и вертикали с помощью свойств left и top. Эти значения остаются неизменными,
независимо от используемых единиц измерения.

Так как координаты слоя определяются от его левого верхнего угла, для точного
выравнивания следует добавить свойства margin-left и margin-top с отрицательными
значениями. Их величина должна быть равна половине ширины слоя (для margin-left)
и высоты (для margin-top).

Чтобы высота слоя не менялась из-за его контента, включен overflow: auto,
он добавляет полосы прокрутки, если в них возникнет нужда, высота при этом
остается неизменной (пример 5).

Пример 5. Ширина слоя в пикселах

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Выравнивание</title>
  <style type="text/css">
   #centerLayer {
    position: absolute;	/* Абсолютное позиционирование */
    width: 400px; /* Ширина слоя в пикселах */
    height: 300px; /* Высота слоя в пикселах */
    left: 50%; /* Положение слоя от левого края */
    top: 50%; /* Положение слоя от верхнего края */
    margin-left: -211px; /* Отступ слева, включает padding и border */
    margin-top: -150px;	/* Отступ сверху */
    background: #fc0; /* Цвет фона */
    border: solid 1px black; /* Параметры рамки вокруг */
    padding: 10px; /* Поля вокруг текста */
    overflow: auto; /* Добавление полосы прокрутки */ 
   }
  </style>
 </head>
 <body>
   <div>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
    nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  </div>
 </body>
</html>

В случае использования процентной записи стиль меняется незначительно, надо
так же поделить ширину и высоту пополам и добавить полученные значения в
качестве аргументов к свойствам margin-left и margin-top (пример 6). При этом надо учитывать, что видимая ширина элемента складывается из значений width, padding и border.

Пример 6. Ширина слоя в процентах

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Выравнивание</title>
   <style type="text/css">
    #centerLayer {
     position: absolute; /* Абсолютное позиционирование */
     width: 40%; /* Ширина слоя в процентах */
     height: 30%; /* Высота слоя в процентах */
     left: 50%; /* Положение слоя от левого края */
     top: 50%; /* Положение слоя от верхнего края */
     margin-left: -20%; /* Отступ слева */
     margin-top: -15%; /* Отступ сверху */
     background: #fc0; /* Цвет фона */
    }
   </style>
  </head>
  <body>
    <div>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
      euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
    </div>
 </body>
</html>

Ширина и высота слоя напрямую связана с отступами слева и сверху, если требуется
установить значение одного из параметров в процентах, соответственно, поменяется
и запись другого параметра. Как показано в данном примере, ширина слоя установлена
в 40%, следовательно, и для свойства margin-left также надо применить проценты, в данном случае, 20%.

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

Выравнивание блока 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.

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

Как сделать выравнивание по центру ?

Приветствую вас, дорогие друзья!

Сегодня мы рассмотрим с вами еще один прием работы c CSS, а именно, как сделать выравнивание по центру <div>. При всей своей простоте данный вопрос может поставить в тупик не только начинающего, а в некоторых случаях даже опытного web-разработчика.

Навигация по статье:

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

Выравнивание <div> по центру с помощью margin по горизонтали

Первый, и самый правильный, на мой взгляд, способ выравнивания блока по центру заключается в использовании CSS-свойства margin со значением auto.

HTML:

CSS:

.child-block2{
display:block; /*Делаем блочный элемент*/
margin:auto;/*Задаем автоматический внешний отступ*/
width:50%;
}

Вот, что получилось:

Выравнивание по центру div

Он имеет некоторые особенности:

1. 1.Данное свойство работает только для блочных элементов. То есть для выравниваемого блока должен быть присвоен display:block; (обычно оно стоит у блока <div> по умолчанию)
2. 2.Данное свойство так же не сработает для блока, у которого задано абсолютное позиционирование (position:absolute) или обтекание (float:left или float:right).

Выравнивание <div> по центру с помощью text-align по горизонтали

Следующий способ выравнивания по центру <div> заключается в использовании CSS-свойства text-align со значением center. Данное свойство предназначено для горизонтального выравнивания текста.

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

Данный вариант не сработает для блока с абсолютным позиционированием (position:absolute;) или если для блока задано обтекание (float:left или float:right).

Пример использования:

HTML:

CSS:

.parent-block1{
text-align:center; /*Выравнивание по центру */
}
.child-block1{
width:50%;
display:inline; /*Делаем строчный элемент*/
}

Вот, что у нас получилось:

Выравнивание div по центру

Выравнивание <div> по центру с помощью vertical-align по вертикали

Первые два варианта позволяют нам выровнять <div> по центру. А как нам быть, если нам нужно выровнять элемент по вертикали? В этом случае мы можем воспользоваться свойством vertical-align со значением middle.

Особенности использования:

1. 1.Данное свойство работает только для табличных элементов. Соответственно выравниваемый элемент должен находиться в ячейке таблицы. Или же он должен находиться в родительском блоке, которому присвоено свойство display:table-cell;, а данный родительский блок должен находится в блоке со значением display:table;

   HTML:

   CSS:

   .parent-block3{
   display:table;
   }
   .child-block3{
   display:table-cell;
   vertical-align:middle;
   }
   .sub-child-block{
   width:50%;
   }

   .parent-block3{ display:table; }   .child-block3{ display:table-cell; vertical-align:middle; }   .sub-child-block{ width:50%; }

   Результат:

   Выравнивание div по центру по вертикали

2. 2.В случае, если для выравниваемого элемента задано абсолютное позиционирование, то <div> будет выровнен по верхней границе блока:

Абсолютное выравнивание <div> по центру

Теперь, зная как выровнять <div> по вертикали и по горизонтали, мы можем совместить два способа выравнивания и добиться идеального расположения блока по центру.

Для того, чтобы этого добиться, нам нужно присвоить блоку свойство margin со значением auto, и расположить его в блоке со CSS свойством display:table-cell;, как это было показано в предыдущем варианте.

HTML:

CSS:

.parent-block4{
width:100%;
height:200px;
display:table; /*делаем родительский блок таблицей*/
border:5px solid green;
margin-top:50px;
}
.child-block4{
display:table-cell; /*делаем блок ячейкой таблицы*/
vertical-align:middle; /*задаём выравнивание по вертикали*/
border:5px solid blue;
width:350px;
height:30px;
font-size:25px;
color:#000;
}
.sub-child-block1{
width:350px;
height:50px;
border:3px solid orange;
margin:auto; /*задаём выравнивание по горизонтали*/
}

Результат:

Абсолютное выравнивание div по центру

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

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

Для этого нам нужно сделать <div> блочным элементом и задать ему следующее выравнивание:

.m-align-block{
margin:10vh auto;
}

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

Во что получится:

Выравнивание div по центру с помощью margin

Надеюсь, моя статья поможет вам разобраться с выравниванием <div> по центру и у вас больше не возникнет с этим проблем. Обязательно добавьте эту статью к себе в закладки и поделитесь ею в социальных сетях с друзьями.

А на этом у меня сегодня все. До встречи в следующих статьях!

С уважением Юлия Гусарь

по центру, по вертикали, выравнивание текста

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

Выравнивание блоков по центру

В css выровнять блок по центру легко. Это самый известный многим прием, но о нем я хотел бы рассказать именно сейчас, в первую очередь. Здесь подразумевается выравнивание по центру по горизонтали относительно родительского элемента. Как оно осуществляется? Допустим, у нас есть контейнер и в нем наш подопытный:

<div id = «wrapper»>
<div id = «header»></div>
</div>

Предположим, что это шапка сайта. Она не тянется на всю ширину окна и нам надо ее отцентрировать. Пишем так:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

#header{
width/max-width: 800px;
margin: 0 auto;
}

Нам нужно указать точную или максимальную ширину, после чего записать ключевое свойство – margin: 0 auto. Оно задает внешние отступы нашей шапке, первое значение определяет отступы сверху и снизу, а второе – справа и слева. Значение auto дает команду браузеру автоматически рассчитать отступы с обеих сторон так, чтобы элемент был ровно по центру родительского. Удобно!

Выравнивание текста

Это тоже очень простой прием. Для выравнивания всех строчных элементов можно использовать свойство text-align и его значения: left, right, center. Последнее центрирует текст, что нам и нужно. Таким же образом можно выровнять даже картинку, потому что она тоже по умолчанию является строчным элементом.

Выравнивание текста по вертикали

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

Задать высоту блока с помощью внутренних отступов. Способ заключается в том, чтобы не задавать явную высоту с помощью height, а создать ее искусственно с помощью paddingов сверху и снизу, которые должны быть одинаковы. Создадим любой блок и запишем ему такие свойства:

div{
background: #ccc;
padding: 30px 0;
}

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

Определить для блока line-height. Мне кажется, это более правильный способ, если вам надо выровнять одну строчку текста. При нем вы можете записать высоту по нормальному, с помощью свойсва height. После этого ему же нужно задать высоту строки, такую же, как и высота блока в целом.

div{
height: 60px;
line-height: 60px;
}

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Преобразовать блок в ячейку таблицы. Суть этого метода в том, что для ячейки таблицы действует свойство vertical-align: middle, которое центрирует элемент по вертикали. Соответственно, в этом случае блоку нужно задать следующее:

div{
display: table-cell;
vertical-align: middle;
}

Этот способ хорош тем, что вы сможете выровнять сколько угодно текста по центру. Но блоку, в который вложен наш div лучше прописать display: table, иначе может не работать.

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

Задать отступы в процентах. Если вы знаете высоту родительского элемента и помещаете в него еще один блочный элемент, то отцентрировать его можно с помощью процентных отступов. Например, родитель имеет высоту 600 пикселей. Вы помещаете в него блок, который имеет высоту 300 пикселей. Сколько вам нужно отступить сверху и снизу, чтобы отцентрировать его? По 150 пикселей, а это 25% от высоты родителя.

Этот способ позволяет сделать центровку только когда размеры позволяют сделать вычисления. А если у вас родитель 887 пикселей в высоту, то точно записать ничего не получится, это и так понятно.

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

А если вдобавок к этому записать еще и margin: 0 auto, то элемент и по горизонтали станет в центр!

Использовать абсолютное позиционирование. Об этом способе мало кто знает. Нужно вставить в css такой код:

position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
max-width: 100%;
max-height: 100%;

Его нужно дописать к стилям элемента, который нужно отцентрировать. Если вы сейчас обновите страницу, то он будет выровнен по центру страницы, а нам надо сделать это относительно родительского блока. Для этого родительскому нужно задать position: relative и тогда отсчет координат будет вестись не от края окна, а от родительского контейнера.

Использовать флексбокс. Самый современный метод! Для этого контейнеру нужно записать в стили свойство display: flex, а его вложенному блоку – margin: auto. Элемент будет выровнен по центру, причем и по горизонтали, и по вертикали.

Если вам нужно выравнивание только по вертикали, то можно записать, например, так: margin: auto 0.

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

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

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

Элементы бывают разные — блочные и строчные. В этой статье мы подробно разберем все способы их выравнивания. Их можно выравнивать как через CSS, так и через атрибуты в HTML. Будет подробно описано выравнивание по горизонтали и вертикали.

Выравнивание по горизонтали

Заранее скажем о том, что элементы могут быть блочными и строчными. Тег

display:block 

— блочный, он не требует переноса строки. Теги

<p>, <h2>, <h3>

и так далее — строчные, каждый из них требует переноса строки.

Задать этот параметр можно через CSS. Для этого используется свойство display. display:block — блочный элемент, display:inline или inline-block — строчный и полублочный.

Выравнивание строчных элементов по горизонтали

Строчные элементы обычно не имеют никаких трудностей с выравниванием по горизонтали. Их расположение можно задать через html атрибут text-align:

<p text-align="center">Текст</p>

— выравнивает текст по центру.

Данный способ работает не со всеми элементами. Его можно применять с параграфами, заголовками, изображениями, а также таблицами.

Кроме атрибута text-align, в html имеется специальный тег. Он работает также, но немного устарел, поэтому лучше пользоваться 1 способом. Пример использования тега:

<center>Текст</center>

Эти способы хороши, но выравнивание через css всё равно остаётся более приоритетным вариантом.

Горизонтальное выравнивание элементов со свойством «display: block»

С элементами, которые являются блочными, например, с тегом

<center>

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

Но не спешите огорчаться, есть метод, который позволит выровнять его через html. Для этого нужно уменьшить его ширину. Изначально его ширина равна 100% ширины родительского элемента. Вы же можете изменить её, лучше через CSS.

Эффект может быть не заметен. Чтобы наглядно увидеть то, как это работает, задайте цвет фона или сделайте рамку для этого блока.

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

Свойство margin

Это свойство можно назвать аналогом атрибута

<text-align>

или тега

<center>

. Его можно применять только к строчным элементам, либо же к уменьшенным блочным.

Автоматическое выравнивание по центру:

margin: 0 auto;

Как только элементу будет присвоено данное свойство, он автоматически будет расположен в центре экрана.

Вышеуказанный вариант — упрощенная запись. Можно написать 4 отдельных свойства, для каждой стороны элемента:

margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;

По сути, это тоже свойство margin: 0 auto, но лучше так не писать. Вышеуказанные 4 свойства лучше использовать, когда необходимо задать особое расположение элементу.

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

Немного об адаптивности

Мы показывали работу этих методов с использованием пикселей.

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

Вертикальное выравнивание элемента

По вертикали можно выровнять только блочный элемент, либо же полублочный. Задаются они так:

display: block; — блочный элемент.

display: inline-block — полублочный элемент.

Внимание! Советуем делать все строчные элементы полублочными, для удобства.

Ещё в начале обучения вертикальное выравнивание может поставить в тупик. Однако, здесь всё просто, просто немного математики. Для этого просто вычисляем ширину родительского блока (того, в котором и расположен нужный элемент). Делим полученное значение на 2, с округлением в большую сторону, а затем задаем соответствующее свойство.

Пример: высота всей страницы равна 2000px, значит отступить нужно ровно 100 пикселей. Для этого задаем следующее свойство:

margin: 50px auto;

Выравнивает по центру, как по вертикали, так и по горизонтали.

Почему 500, а не 1000? Потому что отступы делаются снизу и сверху. 500 снизу, 500 сверху = 1000.

Но есть и более простой способ. Свойство — margin: auto. Оно располагает блок по центру.

Его минусом является то, что он не работает на всех браузерах, так как значения элементов не всегда известны.

Другие хорошие свойства:

1. line-height — задает высоту строки;
2. vertical-align: middle — выравнивает по вертикали. Не работает c элементами «block».

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

Margin и padding

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

margin: 300px; = padding: 300px;

Подробнее о line-height

Чтобы использовать данное свойство, вам нужно знать точную высоту блока-родителя. Если указать неверное значение, текст может неправильно переносится.

Это отличный инструмент при создании сайдбара.

Просто задаем размер line-height, такой же, как и высота родителя.

line-height:300px; — при высоте родителя в 300px.

Выравнивание иконок

Иконки могут иметь большую высоту, чем строка. Можно изменить строку через line-height, но лучше использовать свойство vertical-align.

Выравнивание таблиц

Если элемент блочный, свойство vertical-align на нем не работает. Но можно прибегнуть к одному плохому методу — вместо блочного или строчного элемента, сделать табличный. Она идеально выравнивается по вертикали, но это не очень целесообразно.

Вот пример создания таблицы:

<div>                   								
<div>	  
	<h2>Заголовок</h2>
	<p>текст</p>                                                  			
	</div>
</div>
.table{
	display: table;
}
.cell{
	display: table-cell;
}

Position: absolute

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

Блок можно свободно перемещать через свойства top, left, bottom, right. По сути, вы просто задаете ему расположение относительно четырех указанных сторон.

Для большего удобства, элемент должен располагаться не внутри страницы, а в родительском блоке. Чтобы сделать это, задайте его родителю следующее свойство: position: relative.

Вот пример абсолютного позиционирования в CSS:

.all_content{
position: relative;
}
.content{
position: absolute;
margin: auto;
top: 250px;
bottom: 0;
left: 350px;
right: 0;
}

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

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

Теги:

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.)

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

Вы можете увидеть результат в отдельном
документ.

Поле «margin-right: -50%» необходимо для компенсации «left:
50% ». Правило «влево» уменьшает доступную ширину элемента.
на 50%. Таким образом, рендерер попытается создать строки, которые больше не
чем на половину ширины контейнера. Сказав, что право
маржа элемента дальше правее на ту же величину,
максимальная длина строки снова равна ширине контейнера.

Попробуйте изменить размер окна: вы увидите, что каждое предложение состоит из одного
линия, когда окно достаточно широкое. Только когда окно слишком
узкий для всего предложения будет ли приговор разбит
несколько строк. Когда вы удаляете ‘margin-right: -50%’ и изменяете размер
снова окно, вы увидите, что предложения будут разбиты
уже тогда, когда окно еще вдвое шире текстовых строк.

(Использование ‘translate’ для центрирования в области просмотра было первым
предложенный «Чарли» в ответе на переполнение стека.)

.

CSS свойство выравнивания элементов

Пример

Центрировать выравнивания для всех элементов гибкого элемента