Как выровнять блоки в html

How to Center a Div with CSS – 10 Different Ways

Soham De Roy

As a web developer, sometimes centering a div feels like one of the toughest jobs on planet Earth.

Well, not anymore. In this article, you’ll learn 10 different ways to center a div . We will explore how to center divs using the CSS position property, CSS Flexbox, and CSS Grid.

After reading this whole article, I am confident that you will start centering divs like a pro.

How to Center a Div

For this tutorial, I will be using the same HTML for all 10 methods that we’ll discuss below. The HTML just contains a parent div and a child div inside it.

The main aim of this article is to center the inner div with respect to its parent. I will only be changing the CSS files, but you’ll be able to see all 10 different methods take effect.

The main HTML file goes like this:

With just the basic styling as given in the following lines:

We will get something like this:

What the basic HTML and CSS styling gives us.

We just make a parent div and give it a width and height of 400px , and a color of #f55353 .

Similarly we create a child div inside it and give it a width and height of 100px and give it a color of #feb139 .

The final goal of this article will be to make this transformation:

How to Center a Div using the CSS position Property

1. How to use position: relative, absolute and top, left offset values

The position property in CSS sets how the element is positioned on the page. The default value of the position property is static . The other values that the position property takes are relative , absolute , fixed and sticky .

Now when we give a position: absolute to a DOM element, it becomes absolute with respect to the whole page. This would be useful if we wanted to center the div with respect to the whole page.

On the other hand, setting the parent element to position: relative , makes the children element (with position: absolute ) absolute, relative to the parent element and not the whole page.

In the above example we do just that. We give the parent element a position: relative and child a position: absolute .

Along with the position property, we can specify four other properties viz. top , right , bottom and left which then determines the final location/ position of the element.

The top and bottom specify the vertical positioning of the element where as left and right specify the horizontal positioning.

2. How to use position: relative and absolute, top, left, right and bottom offset values and margin: auto

Continuing with our knowledge of positions from point 1 above, we use the margin property in CSS here. margin: auto lets the browser select a suitable margin for the child element.

In most of the cases it allows the child element to take its specified width and the browser distributes the remaining space equally between the left and right margin pair or top and bottom margin pair or amongst both pairs.

If we mention only top: 0 , bottom: 0 and margin: auto , it centers the child element vertically.

Similarly if we mention only left: 0 , right: 0 and margin: auto , then it will center the child horizontally.

And if we mention all the properties as shown in the code block above, then we get a perfectly centered div both horizontally and vertically.

How to Center a Div Using CSS Flexbox

3. How to use Flexbox, justify-content, and align-item

The above two methods are based on more of a classical method of aligning elements in the page. The modern approaches makes use of Flexbox (for one directional layout modeling) and Grid layout (for more complex two dimensional layout modeling) properties.

Let’s see the Flexbox approach:

Flexbox is not just a single property, but it is a module which comprises of a set of properties. Some of these properties are meant to be for the container (that is, the parent container) and some for the child elements inside it.

The below diagram shows a list of properties that are meant for parent and child elements with respect to Flexbox.

Now it is not possible to cover all the properties in this article. Rather let’s look into some of the properties we are using in this article.

As mentioned above, there are two different entities in the Flexbox model, the parent container and the children element.

The display: flex property defines a container as a flex container. flex-direction is another parent container property which can take in either of the four values row (default value), row-reverse , column and column-reverse .

When working with Flexbox, we need to take two different axes into consideration, that is the main axis and cross axis.

For the cases where flex-direction is row or row-reverse , the horizontal axis is the main axis and vertical axis is the cross axis.

Similarly, when the flex-direction is column or column-reverse , then the vertical axis is the main axis and horizontal axis is the cross axis. Refer to the below diagrams for visual clarity:

The justify-content property of the parent container defines the alignment of its children along the main axis. Thus justify-content: center sets the alignment of all its child elements at the center with respect to the main axis.

Similarly, the align-items property of the parent container defines the alignment of its children along the cross axis. Thus align-items: center sets the alignment of all its child elements at the center with respect to the cross axis.

So the below code block will perfectly align our child element at the center of the parent element both vertically and horizontally.

In this method, we do not need to specify anything explicitly for the child element. display: flex , justify-content and align-items handle everything from the parent component.

4. How to Use Flexbox, justify-content, and align-self

This method is just an alternative to the above method and is quite similar to it.

But in place of using the align-items property (in the parent container property), which sets the alignment for all the childern elements with respect to cross axis, we use align-self (in the child elements) which sets the alignment of individual flex items on the cross axis.

5. How to Use Flexbox and margin: auto

Flexbox gives us very powerful alignment and space distribution capabilities. Also as mentioned above, margin: auto lets the browser select a suitable margin for the child element.

In most cases it allows the child element to take its specified width and the browser distributes the remaining space equally between the left and right margin pair or top and bottom margin pair or amongst both the pairs.

This means that setting the parent container as flex and giving the child a margin: auto alows the browser to evenly distribute the leftover space along both the vertical and horizontal directions.

How to Center a Div Using CSS Grid

6. How to Use Grid, justify-content, and align-items

CSS Grid or just Grid is used for two dimensional layout modeling compared to Flexbox which you use for one dimensional modeling.

Similar to Flexbox, we have the concept of a grid container or parent container and grid items or children items.

The below diagram lists down all the properties you can use for the parent and children. As CSS Grid is a huge topic in itself, it’s not in the scope of this article to discuss about each and every property. So let’s discuss the properties that we’re using in this article.

display: grid initiates an element to become a grid container.

justify-items and align-items align the items inside the grid along the inline (row) axis and block (column) axis respectively.

On the other hand, if the total size of the grid is less than the grid container (which can happen if all the grid items are sized with non-flexible units like px), then in that case we can control the alignment of the grid within the grid container using justify-content and align-content .

justify-content and align-content aligns the grid along the inline (row) axis and block (column) axis respectively.

You can find a comprehensive explanation of all these properties here: A Complete Guide to Grid

As for our case there is only one grid cell and only one child element inside it, so we can use justify-content or justify-items as well as align-content or align-items interchangeably and get the same result.

7. How to Use Grid and place-items

You can use place-items to set both align-items and justify-items properties in the same declaration. Similarly place-content sets both justify-content and align-content is the same declaration.

As mentioned above, in this use case we can use justify-content or justify-items as well as align-content or align-items interchangeably. In the same way we can also use place-items as well as place-content interchangeably and get the same result (specifically for this use case. For any other use case we need to analyse which property should be used).

8. How to Use Grid, align-self, and justify-self

Similar to Flexbox, Grid also supports individual grid item alignment using the align-self and justify-self properties (properties to be specified in the children element).

justify-self aligns grid items inside a grid cell along the inline (row) axis whereas align-self aligns the grid items inside the grid cell along the block (column) axis.

9. How to Use Grid and place-self

The place-self property sets both justify-self and align-self properties in a single declaration. So assigning a child element to place-self: center centers the child both vertically and horizontally.

10. How to Use Grid and margin: auto

Similar to Flexbox, Grid also gives us powerful alignment and space distribution capabilities.

As seen in point 5, we can do a similar process with Grid instead of using Flexbox and we’ll get the same result if we asign margin: auto to the child element.

Here’s The Result

Well as expected, following any of the above methods will result in this:

Summary

In this article, we saw how to center a div using 10 different methods. Those methods were:

1. Using position: relative, absolute and top, left offset values
2. Using position: relative and absolute, top, left, right and bottom offset values and margin: auto
3. Using flexbox, justify-content and align-item
4. Using flexbox, justify-content and align-self
5. Using flexbox and margin: auto
6. Using grid, justify-content and align-items
7. Using grid and place-items
8. Using grid, align-self and justify-self
9. Using grid and place-self
10. Using grid and margin: auto

We also looked at what all these properties like justify-content , align-items , position and so on meant and how we can use some of them together to center our divs.

Some good resources

GitHub link

You can find the GitHub link for all the files for all the methods mentioned above here: Github Link

Wrap Up

Thanks for reading! I hope you liked this article on 10 different methods to center a div and I hope that they come handy to you in the future.

Do consider sharing this article with your friends – I’d really appreciate that. Stay tuned for more amazing content. Peace out! ��

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

Очень часто стоит задача выровнять блок по центру страницы / экрана, да ещё и так, чтобы без ява-скрипта, без задания жёстких размеров или отрицательных отступов, ещё чтобы и скроллбары работали у родителя, если блок превышает его размеры. В сети ходят достаточно много однообразных примеров как выровнять блок по центру экрана. Как правило большинство из них основаны на одних принципах.

Ниже представлены основные способы решения задачи, их плюсы и минусы. Чтобы понимать суть примеров, рекомендую уменьшить высоту / ширину окошка Result в примерах по указанным ссылкам.

Вариант 1. Отрицательный отступ.

Позиционируем блок атрибутами top и left на 50%, и заранее зная высоту и ширину блока, задаём отрицательный margin, который равен половине размера блока. Огромным минусом данного варианта является то, что нужно подсчитывать отрицательные отступы. Так же блок не совсем корректно ведёт себя в окружении скроллбаров — он попросту обрезается так как имеет отрицательные отступы.

Вариант 2. Автоматический отступ.

Менее распространённый, но схожий с первым. Для блока задаём ширину и высоту, позиционируем атрибутами top right bottom left на 0, и задаём margin auto. Плюсом данного варианта являются рабочие скроллбары у родителя, если у последнего задана 100% ширина и высота. Минусом данного способ является жёсткое задание размеров.

Вариант 3. Таблица.

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

Чтобы добавить скролл в данный пример, придётся добавить в конструкцию ещё один элемент.
Пример: jsfiddle.net/serdidg/xkb615mu.

Вариант 4. Псевдо-элемент.

Данный вариант лишён всех проблем, перечисленных у предыдущих способов, а так же решает первоначально поставленные задачи. Суть состоит в том, чтобы у родителя задать стили псевдо-элементу before, а именно 100% высоту, выравнивание по центру и модель строчного блока. Так же само и у блока ставится модель строчного блока, выравнивание по центру. Чтобы блок не «падал» под псевдо-элемент, когда размеры первого больше чем родителя, указываем родителю white-space: nowrap и font-size: 0, после чего у блока отменяем эти стили следующими — white-space: normal. В данном примере font-size: 0 нужен для того, чтобы убрать образовавшийся пробел между родителем и блоком в связи с форматированием кода. Пробел можно убрать и иными способами, но лучшим считается просто его не допускать.

либо, если вам нужно, чтобы родитель занимал только высоту и ширину окна, а не всей страницы:

Вариант 5. Flexbox.

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

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

Вариант 6. Transform.

Подходит в случае если мы ограничены структурой, и нет возможности манипулировать родительским элементом, а блок выровнять как-то нужно. На помощь придёт css функция translate() . При значение 50% абсолютное позиционирование расположит верхний левый угол блока точно по центру, затем отрицательное значение translate сдвинет блок относительно своих собственных размеров. Учтите, что могут всплыть негативные эффекты в виде размытых граней или начертания шрифта. Также подобный способ может привести к проблемах с вычислением положения блока с помощью java-script’а. Иногда для компенсации потери 50% ширины из-за использования css свойства left может помочь заданное у блока правило: margin-right: -50%; .

Вариант 7. Кнопка.

Пользователь azproduction предложил вариант, где блок обрамляется в тег button. Кнопка имеет свойство центрировать всё, что находится у неё внутри, а именно элементы строчной и блочно-строчной (inline-block) модели. На практике использовать не рекомендую.

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

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

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

Старые методы выравнивания

У CSS традиционно были очень ограниченные возможности выравнивания. Мы могли выровнять текст, используя text-align , центральные блоки, используя auto margin s, а в макетах таблицы или встроенного блока, используя vertical-align свойство. Выравнивание текста теперь покрывается модулями Inline Layout и CSS Text, и впервые в Box Alignment мы имеем полные возможности горизонтального и вертикального выравнивания.

Если вы изначально узнали Flexbox, вы можете считать эти свойства частью спецификации Flexbox и некоторые из свойств действительно перечислены в Level 1 Flexbox. Однако в спецификации отмечается, что спецификация Box Alignment должна рассматриваться, поскольку она может добавить дополнительные возможности по сравнению с тем, что в настоящее время находится в Flexbox.

Основные примеры

Следующие примеры демонстрируют, как некоторые из Box Alignment Properties применяются в Grid and Flexbox.

Пример выравнивания раскладки сетки CSS

В этом примере с использованием Grid Layout, в контейнере сетки есть дополнительное пространство после прокладки фиксированных дорожек ширины на основной оси. Это пространство распределяется с помощью justify-content . На блочной (поперечной) оси выравнивание элементов внутри их областей сетки контролируется с помощью align-items . Первый элемент переопределяет значение элементов выравнивания, заданное в группе, путём установки align-self в центр.

Пример выравнивания Flexbox

В этом примере три элемента гибкости выровнены по главной оси с использованием justify-content и на поперечной оси с использованием align-items . Первый элемент переопределяет align-items , заданные в группе align-self по center .

Ключевые понятия и терминология

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

Связь с режимами записи

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

Два измерения выравнивания

При использовании свойств выравнивания ячеек вы выровняете содержимое по одной из двух осей — inline (или main) оси и block (или cross) оси. Внутренняя ось — это ось, по которой используются слова в потоке предложения в режиме записи — для английского языка, например, встроенная ось горизонтальна. Ось блока — это ось, вдоль которой выложены блоки, такие как элементы абзаца, и проходит по оси Inline.

При выравнивании элементов на встроенной оси вы будете использовать свойства, начинающиеся с justify- :

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

Flexbox добавляет дополнительное усложнение в том, что указанное выше верно, когда flex-direction установлено в row . Свойства меняются местами, когда flexbox установлен в column . Поэтому при работе с flexbox легче думать о главной и поперечной оси, а не о линии и блоке. Свойства justify- всегда используются для выравнивания по главной оси, align- на поперечной оси.

The alignment subject

Объект выравнивания — это то, что выровнено. Для justify-self , или align-self , или при настройке этих значений как группы с justify-items или align-items это будет поле элемента, в котором используется это свойство. Свойства justify-content и align-content различаются для каждого метода макета.

The alignment container

Контейнер выравнивания — это поле, в котором объект выравнивается внутри. Обычно это будет блок, содержащий объект выравнивания. Контейнер выравнивания может содержать один или несколько объектов выравнивания.

На приведённом ниже рисунке показан контейнер выравнивания с двумя объектами выравнивания внутри.

Fallback alignment

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

Типы выравнивания

Существует три различных типа выравнивания, которые специфицируют детали; они используют значения ключевых слов.

• Positional alignment (выравнивание положения): указание положения объекта выравнивания относительно его контейнера выравнивания.
• Baseline alignment (исходное выравнивание): эти ключевые слова определяют выравнивание как взаимосвязь между базовыми линиями нескольких объектов выравнивания в контексте выравнивания.
• Distributed alignment (распределённое выравнивание): эти ключевые слова определяют выравнивание как распределение пространства между объектами выравнивания.

Значения ключевых слов позиционирования

Следующие значения определены для позиционного выравнивания и могут использоваться в качестве значений для выравнивания содержимого с justify-content и align-content , а также для самовыравнивания с justify-self и align-self .

• center
• start
• end
• self-start
• self-end
• flex-start for Flexbox only
• flex-end for Flexbox only
• left
• right

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

Например, при работе в CSS Grid Layout, если вы работаете на русском языке и устанавливаете для него значение justify-content start , это приведёт к перемещению элементов в встроенном измерении в начало, которое будет левым, поскольку предложения на русском начинаются слева. Если вы использовали арабский язык, право на левый язык, то одно и то же значение start приведёт к тому, что элементы перемещаются вправо, так как предложения на арабском языке начинаются с правой стороны страницы.

Оба этих примера имеют justify-content: start , однако местоположение начала изменяется в соответствии с режимом записи.

Исходное выравнивание

Ключевые слова выравнивания базовой линии используются для выравнивания базовых линий ящиков по группе субъектов выравнивания. Они могут использоваться в качестве значений для выравнивания контента с помощью justify-content и align-content , а также для самовыравнивания с justify-self и align-self .

• baseline
• first baseline
• last baseline

Исходное выравнивание содержимого — указание значения выравнивания базовой линии для justify-content или align-content — работает в методах макета, которые содержат элементы в строках. Объекты выравнивания выравниваются по базовой линии друг к другу, добавляя в них поля.

Исходная линия выравнивания сдвигает поля для выравнивания по базовой линии путём добавления поля за пределами полей. Self alignment — это использование justify-self или align-self или при настройке этих значений в виде группы с justify-items и align-items .

Distributed alignment

Ключевые слова распределённого выравнивания используются с параметрами align-content и justify-content . Эти ключевые слова определяют, что происходит с каким-либо дополнительным пространством после отображения объекта. Значения следующие:

• stretch
• space-between
• space-around
• space-evenly

Например, элементы Flex Layout сначала выровнены с использованием flex-start. Работая в горизонтальном верхнем и нижнем режимах записи, таком как русский, с flex-direction в виде row элементы начинаются в крайнем левом углу и любое свободное место после отображения элементов помещается после элементов.

Если вы устанавливаете justify-content: space-between в контейнере flex, доступное пространство теперь разделяется и помещается между элементами.

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

Выравнивание переполнения

safe и unsafe ключевые слова помогают определить поведение, когда объект выравнивания больше, чем контейнер выравнивания. Ключевое слово safe будет выравниваться для start в случае заданного выравнивания, вызывающего переполнение, целью которого является избежать «потери данных», когда часть элемента находится за пределами границ контейнера выравнивания и не может быть прокручена до.

Если вы укажете unsafe , выравнивание будет выполнено, даже если это приведёт к такой потере данных.

Пробелы между boxes

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

Свойство gap является сокращением для row-gap и column-gap , что позволяет сразу установить эти свойства:

В приведённом ниже примере макет сетки использует сокращённую gap , чтобы установить разрыв 10px между дорожками строк и 2em разрыв между дорожками столбцов.

В этом примере я использую свойство grid-gap (en-US) в дополнение к gap . Первоначальные свойства зазора были предварительно префиксными grid- в спецификации Grid Layout, а некоторые браузеры поддерживают только эти префиксные версии.

Префиксные версии будут поддерживаться как псевдоним неподписанных, однако вы всегда можете удвоить так, как это было бы с префиксами поставщика, добавив свойство grid-gap , а затем свойство gap с теми же значениями.

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

Страницы, детализирующие индивидуальные свойства выравнивания

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

Best 3 Ways to Center a Div with CSS

A beginner person always faces the problem of center div on a webpage.

I’m Face lots of trouble maybe you also. When I center div in the web page, one browser center div properly, and other browsers do not properly work. That reason CSS is very confusing for beginner people. You try some other CSS property to center div. But you fail.

In This article, we cover the top three ways to center div with CSS. We do not use any advanced CSS. We only use basic CSS property to center div.

Let’s start it.

1. First ways
2. Second ways
3. Third ways

First ways

Firstly, we use the CSS position property. which is a common way to center div in CSS. Lots of time, I use position property to center div. this is a very easy and old technique to center div.

HTML code

CSS code

Second ways

secondly, we use flexbox to center div in a web browser. Flexbox functionally helps to center div very easily. These are new ways to center div as compare first ways.

Flexbox design a one-dimensional layout in your browser. Bootstrap also uses flexbox property to center div in a web browser.

HTML code

CSS code

Third ways

Thirdly, we use a grid layout to center div in the web browser. Grid layout new ways to center your div. the grid system is very cool and easy to use. The grid system very effectively designs a 3D website layout. I'm also recommended to use a grid system in the website rather than use any CSS framework.