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

Привет. Расскажу о том, как в вёрстке выровнять блок с абсолютным позиционированием по центру, чтобы он стоял ровно по центру экрана.
Для этого нам нужен сам блок, скажем, размером 600×400 пикселей.
Сам код выглядит так:

Я нахожусь ровно по центру экрана

#centerred_block

Самое важное выделено в css. Суть такая:

1. Определяете ширину и высоту блока. В нашем случае, width: 600px; height: 400px;
2. Позиционируете блок position:absolute , установив его на уровень top:50%; left: 50%
3. Выравниваете блок по горизонтали, сдвинув его влево на половину ширины блока. В нашем случае, margin-left: -300px;
4. Выравниваете блок по вертикали, сдвинув его вверх на половину высоты блока. В нашем случае, margin-top: -200px;

На результат можно глянуть на JsFiddle

Все про CSS-выравнивание: способы и примеры

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

Освойте профессию «Frontend-разработчик»

Подготовка проекта

Профессия / 9 месяцев
Frontend-разработчик
Создавайте интерфейсы сервисов, которыми пользуются все
2 400 ₽/мес 4 000 ₽/мес

Все примеры выравнивания будем рассматривать на блоках

 
Текстовый блок
 

body < font-family: Tahoma, sans-serif; background-color: rgb(18, 18, 18); >.parent < border: 4px solid rgb(113, 187, 122); border-radius: 10px; margin: 15px; padding: 10px; >.child

Теперь на странице есть блок с текстом, но он по умолчанию выравнивается по верхнему левому краю. Если в HTML добавить еще один блок с текстом, то он добавится под первым. Он также не будет отцентрирован.

 
Текстовый блок 1
 
Текстовый блок 2
 

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

Для выравнивания по горизонтали в CSS предусмотрено несколько способов. Сперва рассмотрим наиболее простые и перейдем к продвинутым, построенным на модели веб-макета Flexbox.

Автоотступы

Горизонтальное выравнивание в CSS — это расстановка отступов по левому и правому краю блока. В СSS для этого есть свойства margine-left и margine-right . Для них можно устанавливать значения вручную, а можно доверить эту задачу CSS. Для этого выберите автоматическое управление отступами с помощью значения auto и установите ширину блоков с помощью свойства width .

 
Текстовый блок 1
 
Текстовый блок 2
 

.child

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

Inline-блоки

С помощью строчных элементов удобнее всего выполнять именно горизонтальное выравнивание по центру в CSS. Для этого есть готовый метод text-align: center , примените его к родительскому блоку. Чтобы выравнивание корректно сработало, к дочерним блокам добавьте свойство display: inline-block .

 
Текстовый блок 1
 
Текстовый блок 2
 

.parent < text-align: center; >.child

Плюс inline-блоков в том, что их ширина автоматически подстраивается под содержимое. Поэтому ее уже не надо указывать с помощью свойства width . Если применить такой тип центровки в CSS к нескольким блокам, то они будут расположены в строчку, но с разной высотой, если содержимое отличается.

Flexbox

Flexbox — один из самых удобных способов выравнивания практически для любого типа контента и блоков. Для горизонтального выравнивания в Flexbox к родительскому блоку примените свойство display: flex , чтобы блок стал flex-контейнером. Используйте justify-content: center , чтобы выровнять по горизонтали дочерние элементы.

 
Текстовый блок 1
 
Текстовый блок 2
 

.parent

В случае с Flexbox ширина и высота блоков автоматически подстраиваются под содержимое. Если применить такой тип выравнивания по центру к нескольким блокам, то они будут выстраиваться в одну линию.

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

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

Свойства position и transform

Этот способ центрирования по вертикали –– один из самых сложных. Придется применять много свойств, и важно ничего не пропустить, иначе блок выравнивается по одной из своих границ, а не по центру. Сначала передайте родительскому блоку свойство position: relative и задайте высоту 100 пикселей с помощью свойства height . После этого к дочернему блоку надо применить свойство position: absolute . Теперь можно выполнить сдвиги блока относительного родительского с помощью свойств top и position .

 
Текстовый блок 1
 

.parent < position: relative; height: 100px; >.child

Flexbox

Для вертикального выравнивания надо сделать родительский блок flex-контейнером с помощью свойства display: flex и указать тип выравнивания с помощью свойства align-items .

 
Текстовый блок 1
 

.parent

Станьте Frontend-разработчиком
и создавайте интерфейсы сервисов, которыми пользуются все

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

Чаще всего блоки необходимо разместить по центру контейнера или страницы. Для этого потребуются приемы выравнивания по горизонтали и вертикали. Их комбинация задаст правильное центрирование.

Свойства position и transform

Свойства position и transform мы уже применяли для выравнивания по вертикали. Для центрирования можно взять свойства для вертикального выравнивания, добавить left: 50% и изменить значение transform на translate (-50%, -50%) .

 
Текстовый блок 1
 

.parent < position: relative; height: 100px; >.child

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

 
Текстовый блок 1
 
Текстовый блок 2
 
Текстовый блок 3
 

Flexbox

Для выравнивания по центру с помощью Flexbox необходимо просто объединить вертикальное и горизонтальное выравнивания.

 
Текстовый блок 1
 

.parent

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

 
Текстовый блок 1
 
Текстовый блок 2
 
Текстовый блок 3
 

Grid

Выравнивание с помощью Grid-макета похоже на Flex. Этот способ удобный, потому что не нужно заранее знать размеры блоков и применять к ним много свойств. Сначала сделайте родительский блок grid-контейнером с помощью свойства display: grid . Дочерним элементам установите автоматические отступы через margin: auto .

 
Текстовый блок 1
 

.parent < display: grid; height: 100px; >.child

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

 
Текстовый блок 1
 
Текстовый блок 2
 
Текстовый блок 3
 

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

• left — по левому краю;
• right — по правому краю;
• center — по центру;
• justify — по ширине.

Рассмотрим на примере четыре вида выравнивания текста, сохранив стили из прошлых примеров.

 
Текстовый блок left
 
Текстовый блок right
 
Текстовый блок center
 
CSS (англ. Cascading Style Sheets «каскадные таблицы стилей») -- формальный язык декорирования и описания внешнего вида документа (веб-страницы), написанного с использованием языка разметки (чаще всего HTML или XHTML). Также может применяться к любым XML-документам, например, к SVG или XUL.
 

.left < text-align: left; >.right < text-align: right; >.center < text-align: center; >.justify

Значения left , right и center выравнивают текст согласно своим названиям. При этом выравнивается только текст относительно своего блока. Сами блоки продолжают занимать всю ширину родителя. Значение justify используется редко из-за того, что оно добавляет неравномерные пробелы. Такой способ применяют только для верстки книг или научных работ.

Свойство text-align можно использовать для выравнивания текста, блоков, заголовков, форм и списков. К примеру, можно расположить по центру заголовок.

 
Заголовок
 

.header

Выравнивание изображений

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

Flexbox

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

.parent

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

.parent

Свойство text-align

К родительскому блоку можно применять свойство text-align и установить ему значение center . Так вы выровняете изображение и все содержимое блока.

.parent

Свойства position и transform

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

.parent < width: 500px; height: 500px; position: relative; >.img

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

 
Заголовок
 

.parent < width: 500px; height: 500px; position: relative; >.img < position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); >.header

Итог

В CSS большое разнообразие подходов к выравниванию элементов. Главная сложность — выбрать подходящий под вашу задачу. Решая, какой способ выравнивания в CSS самый удобный, помните:

• Flexbox удобно использовать практически для всех типов выравнивания и для любого контента;
• свойство text-align позволяет выравнивать не только текст, как это может показаться из названия, но и формы, заголовки, списки, блоки и изображения;
• сетку Grid удобно использовать для центрирования элементов внутри родительского блока.

Frontend-разработчик

Научитесь создавать удобные и эффектные сайты, сервисы и приложения, которые нужны всем. Сегодня профессия на пике актуальности: в России 9000+ вакансий, где требуется знание JavaScript.

Как выровнять блок (div) по центру — все популярные способы выравнивания

Подробное руководство по центрированию элементов на странице.

В этой статье рассмотрим, как отцентрировать блок по горизонтальной и вертикальной оси.

Горизонтальное центрирование

Первый способ

Первый вариант самый просто — просто добавьте вашему блоку свойство text-align: center;

.myblock

⚠️ Недостаток этого метода в том, что теперь весь контент внутри этого блока будет центрироваться по центру:

Таким образом данный способ подойдет для конкретной строки (например для h2,h3 и тд). Но для центрирования блока это плохой вариант.

Второй способ

Тоже достаточно простой способ. Используем display: flex;

К примеру, хотим выровнять один блок (заголовок h1):

 
 
Заголовок
 
 

.myblock

⚠️ Важно, если вы хотите добавить несколько блоков внутри элемента с классом .myblock, то нужно немного изменить css.

 
Заголовок
 
Небольшой текст
 
 

Здесь мы добавили блок с классом width-1-2, чтобы продемонстрировать, как работает центрирование для блоков с заданной шириной.

.myblock < display: flex; flex-direction: column; align-items: center; justify-content: center; >.width-1-2

Нам пришлось добавить в css свойство flex-direction: column, чтобы сменить основную ось (была горизонтальная, стала вертикальная) и разместить блоки друг над другом. И раз мы сменили ось, то теперь нам нужно использовать align-items:center, чтобы разместить блок по центру.

Как видите, блоки размещены по центру, при этом, в отличие от text-align: center; текст внутри div не центрирован.

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

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

Здесь все немного интереснее, но все так же при этом просто и понятно.

5 способов выровнять HTML-элемент горизонтально и вертикально

Устали искать способ вертикально и горизонтально выровнять HTML-элемент? В этой статье мы собрали целых 5 способов сделать это!

Каждый, кто работает с HTML/CSS, рано или поздно сталкивается с проблемой вертикального и горизонтального выравнивания элемента. Чтобы вы лишний раз не гуглили и не находили много разных вариантов, мы собрали здесь несколько самых популярных.

Способ 1

В поддерживаемых браузерах можно использовать top: 50% / left: 50% в сочетании с translateX(-50%) translateY(-50%) для динамического горизонтального/вертикального центрирования элемента:

.container

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

Способ 2

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

html, body, .container < height: 100%; >.container

Способ 3

В некоторых случаях вам будет нужно убедиться, что высота элемента html / body равна 100%.

Для вертикального выравнивания присвойте свойствам width и height родительского элемента значение 100% и добавьте display: table . В дочернем элементе измените значение display на table-cell и добавьте vertical-align: middle .

Для горизонтального выравнивания текста и других inline-элементов можно либо использовать text-align: center , либо margin: 0 auto , если вы имеете дело с блоковым элементом. Это должно сработать в большинстве браузеров:

html, body < height: 100%; >.parent < width: 100%; height: 100%; display: table; text-align: center; >.parent > .child

Примеры доступны здесь и здесь.

Способ 4

Здесь предполагается, что высота текста заранее известна. В этом случае, например, 18px . Теперь нужно всего лишь присвоить свойству position элемента значение absolute и подвинуть сверху на 50% относительно родительского элемента. Наконец, свойству margin-top нужно присвоить отрицательное значение, равное половине высоты элемента:

html, body, .container < height: 100%; >.container < position: relative; text-align: center; >.container > p

За примерами сюда и сюда. Этот вариант должен работать во всех поддерживаемых браузерах.

Способ 5

В некоторых случаях у родительского элемента фиксированная высота. Для вертикального выравнивания нужно всего лишь присвоить свойству line-height дочернего элемента высоту родительского. Хотя в некоторых случаях это будет работать, такой способ не стоит использовать, так как несколько строк текста всё испортят:

.parent < height: 200px; width: 400px; text-align: center; >.parent > .child

Пример можно посмотреть здесь.