Css relative absolute center

How to center a div in CSS

In this article, we are going to learn how to center a div in CSS both horizontally and vertically using 15 different methods with examples.

As a web developer, one of the most common things that you will most frequently need to do is to center a div element using CSS .

1. Using align property
2. Using flexbox (justify-content)
3. Position absolute and margin auto
4. Position absolute and translateX
5. Using table
6. Using CSS table property

1. Using flexbox (align-items)
2. Position absolute and margin auto (vertical center)
3. Position absolute and translateY (vertical center)
4. Using table (vertical center)
5. Using CSS table property (vertical center)

Center div Horizontally In CSS

Let’s see how you can align div elements to center horizontally. We have discussed 5 different ways for it, of which margin auto and flexbox is the most commonly used method.

1. Center div Horizontally using margin method

To center a div element horizontally you can simply use the margin property of CSS. It is the easiest way to align a div to the center.

Give margin-left: auto and margin-right: auto to the element or you can use shorthand margin: 0 auto , this will automatically adjust the element to the center of its parent element horizontally by leaving equal spaces to its left and right side.

Here is an example in which a child element is aligned to the center using margin property.

/* center element using margin property */ .center < margin: 0 auto; >.parent < padding: 20px; background: #7E89B4; border: 2px solid #4B5681; >.child

Note : To align any element to center horizontally you need to keep 2 things in mind:

1. The element must be a block label element. If the display property of an element is inline or inline-block then it will not center using align property.
2. The width of the element should be smaller than the parent element. If the element is itself bigger than its parent then will be unable to get equal spacing from its left and right side and hence won’t center.

2. Center div Horizontally using flexbox

One of the best ways to align the div element to the center horizontally is by using the CSS flexbox.

Using flexbox you can position any element in 2D (horizontal and vertical). Here we will center div horizontally.

First, add display: flex property to the parent of the div element to make it a flex container, then use the justify-content property. Set justify-content: center to center horizontally.

Remember the flex property should be applied to the parent element. Here is the example code.

/* center element using flexbox */ .center < display: flex; justify-content: center; >.parent < border: 2px solid #4B5681; background: #7E89B4; padding: 20px; >.child

3. Center div Horizontally Using Position absolute and margin auto

An element having an absolute position is like a floating element in the parent element. You can move it wherever you want within the document.

To align the child element center horizontally you need to apply left: 0 , right: 0 , and margin-left: auto , margin-right: auto to the element ( margin: 0 auto shorthand).

.parent < position: relative; border: 2px solid #4B5681; background: #7E89B4; height: 100px; >/* center element using position absolute and margin auto */ .child

4. Center div horizontally using position absolute and translateX

Using position property and translateX you can align the element horizontally as well as vertically to center. Here we will see horizontal alignment.

For this, the position of the parent element should be relative and the position of the child element should be absolute .

Now, shift the child element 50% to its left.

This left shift of 50% will make the child element start from midway to the right side of the parent element.

You can see in the above picture we want to center the box horizontally but it starts from the middle of the parent element. So we can apply the translateX property and move the child element 50% in a negative direction which will align it in the center. Now add transform: translateX(-50%) to finally center the child element.

5. Center div Horizontally using table

Using a table to design a page layout is not used nowadays, but it’s worth it to know that you can use this to center the element horizontally.

To center an element horizontally in the table use text-align: center to parent and display: inline-block to the child element.

To see the code in effect width of the child should be less than the parent element so we have set the parent width to 100vw for understanding purposes.

Here is HTML and CSS code as an example.

6. Center div Horizontally Using Display table-cell

CSS enables us to change ordinary elements into the effect of table elements. Using this feature and concept used in the above approach you can center the element horizontally.

Set display: table-cell and text-align: center to the parent element and display: inline-block to the child element.

2. Center div Vertically In CSS

Now we will see how to center a div vertically in CSS. For most cases you can refer above methods of horizontal alignment and add a few more properties to center it vertically also, but anyway we will discuss it in detail.

1. Center div Vertically Using flexbox

Using flexbox you can align elements both in the horizontal and vertical direction. Here we will align the div in the vertical direction.

First, you need to define display: flex to the parent element. Now the element inside this parent element becomes flex items.

To align the child elements vertically use the align-items property and set its value as the center .

/* Center vertically */ .parent < display: flex; align-items: center; border: 2px solid #4B5681; background: #7E89B4; height: 200px; >.child

2. Center div Vertically Using Absolute position and margin auto

We already know the element having an absolute position is can be moved very easily within the webpage. Using this we can also align to the center.

To align the child element center vertically you need to apply top: 0 , bottom: 0 and margin-top: auto , margin-bottom: auto to the element ( margin: auto 0 shorthand).

3. Center div Vertically Using position absolute and translateY

In the same way, you centered the element horizontally using position absolute and translateX, you can use translateY to center the element vertically.

To do this set position: relative to the parent element and position: absolute to the child element and top: 50% .

This will flow the child element to start from the verticle middle of the parent element, which is not the center but you can use transform: translateY(-50%) to shift it up by 50% which will make it verticle align to the center.

4. Center div Vertically Using the table

As we have discussed above you can also use the table to create a layout and center element (not recommended).

To center an element vertically in the table use vertical-align: middle to parent and display: inline-block to the child element.

To see the code in effect height of the child should be less than the height parent element so we have set the parent height to 200px for understanding purposes.

Источник

Абсолютное горизонтальное и вертикальное центрирование

Сколько уже было сломано копий о задачу выравнивания элементов на странице. Предлагаю вашему вниманию перевод отличной статьи с решением этой проблемы от Стефана Шоу (Stephen Shaw) для Smashing Magazine — Absolute Horizontal And Vertical Centering In CSS.

Все мы знали о margin: 0 auto; для горизонтального центрирования, но margin: auto; не работало для вертикального. Это можно легко исправить, просто задав высоту и применив следующие стили:

Я не первый, кто предложил это решение, однако такой подход редко применяется при вертикальном выравнивании. В комментариях к статье How to Center Anything With CSS Simon ссылается на пример jsFiddle, где приводится отличное решение для вертикального центрирования. Вот еще несколько источников на эту тему.

Рассмотрим способ поближе.

Достоинства

• Кроссбраузерность (включая IE 8-10)
• Никакой дополнительной разметки, минимум стилей
• Адаптивность
• Независимость от padding (без box-sizing!)
• Работает для изображений

Недостатки

• Должна быть задана высота (см. Variable Height)
• Рекомендуется задать overflow: auto, чтобы контент не расползался
• Не работает на Windows Phone

Совместимость с браузерами

Метод был протестирован, и прекрасно работает в Chrome, Firefox, Safari, Mobile Safari и даже IE 8-10. Один пользователь упоминал, что контент не выравнивается по вертикали на Windows Phone.

Внутри контейнера

Контент, размещенный в контейнер с position: relative будет прекрасно выравниваться:

С использованием viewport

Установим для контента position: fixed и зададим z-index:

Адаптивность

Главное преимущество описываемого способа — это прекрасная работа, когда высота или ширина задана в процентах, да еще и понимание min-width/max-width и min-height/max-height.

.Absolute-Center.is-Responsive

Смещения

Если на сайте присутствует фиксированная шапка или требуется сделать какой-то другой отступ, просто нужно добавить в стили код вроде top: 70px; Пока задан margin: auto; блок с контентом будет корректно центрироваться по высоте.

Еще можно выравнивать контент по нужной стороне, оставляя центрирование по высоте. Для этого нужно использовать right: 0; left: auto; для выравнивания справа или left: 0; right: auto; для выравнивания слева.

Много контента

Для того, чтобы большое количество контента не позволяло верстке разъезжаться, используем overflow: auto. Появится вертикальная прокрутка. Также можно добавить max-height: 100%; если у контента нет дополнительных отступов.

Изображения

Способ отлично работает и для изображений! Добавим стиль height: auto; тогда картинка будет масштабироваться вместе с контейнером.

Изменяемая высота

Описываемый способ требует заданной высоты блока, которая может быть указана в процентах и контролироваться с помощью max-height, что делает метод идеальным для адаптивных сайтов. Один из способов не задавать высоту — использование display: table. При этом блок контента центрируется независимо от размера.

Могут возникнуть проблемы с кроссбраузерностью, возможно следует использовать способ с table-cell (описан ниже).

• Firefox/IE8: использование display: table выравнивает блок вертикально по верхней границе документа.
• IE9/10: использование display: table выравнивает блок по левому верхнему углу страницы.
• Mobile Safari: если ширина задана в процентах, страдает горизонтальное центрирование

Другие способы

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

Отрицательный margin

Наверное, самый популярный способ. Подходит, если известны размеры блока.

• Не адаптивный
• Ползет верстка, если в контейнере слишком много контента
• Приходится компенсировать отступы или использовать box-sizing: border-box

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

Один из самых простых способов, поддерживает изменение высоты. Есть подробная статья на эту тему — «Centering Percentage Width/Height Elements» от CSS-Tricks.

• Не работает в IE 8
• Использование префиксов
• Может мешать работе других эффектов с transform
• В некоторых случаях при рендеринге размываются края блока и текст

Table-cell

Возможно один из самых лучших и простых способов. Подробно описан в статье «Flexible height vertical centering with CSS, beyond IE7» от 456bereastreet. Главный недостаток — дополнительная разметка: требуется аж три элемента:

.Pos-Container.is-Table < display: table; >.is-Table .Table-Cell < display: table-cell; vertical-align: middle; >.is-Table .Center-Block

• Изменяемая высота
• Верстка не едет при большом количестве текста в блоке
• Кроссбраузерность

Flexbox

Будущее CSS, flexbox будет решать множество сегодняшних проблем верстки. Подробно об этом написано в статье Smashing Magazine, которая называется Centering Elements with Flexbox.

• Контаент может быть любой высоты или ширины
• Может использоваться в более сложных случаях

• Нет поддержки IE 8-9
• Требуется контейнер или стили в body
• Требует множество разнообразных префиксов для корректной работы в современных браузерах
• Возможные проблемы производительности

Итог

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

Источник