Абсолютное центрирование с помощью CSS - Форум

Новые сообщения
Участники
Правила форума
Поиск
RSS

Страница 1 из 1
1

Форум » Web-Раздел » Начинающему вебмастеру » Абсолютное центрирование с помощью CSS (Абсолютное центрирование по горизонтали и вертикали в CSS)

Абсолютное центрирование с помощью CSS

Kosten

Четверг, 30 Мая 2019 | Сообщение 1

Администраторы

Сообщений:44356

Награды: 70

« 554 »

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

А также свойство вертикального выравнивания должно быть установлено на середину.

Посмотреть

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

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

Посмотреть

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

HTML

Код

<div class="sagtun maszabtun">
Здесь идет описание
</div>

CSS

Код

.sagtun {
    width: 185px;
    height: 185px;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    color: #f5eeee;
    background: #292626;
}
.maszabtun {
    text-align: center;
    line-height: 185px;
    box-shadow: 3px 2px 3px rgba(29, 28, 28, 0.59);
    border-radius: 10px;
}

Демонстрация

Прикрепления: 1382205.png (2.6 Kb) · 8550932.png (3.5 Kb)

Страна: (RU)

Kosten

Пятница, 31 Мая 2019 | Сообщение 2

Администраторы

Сообщений:44356

Награды: 70

« 554 »

Центрирование div на странице

Значение auto в margin свойстве устанавливает левое и правое поля для доступного пространства на странице. Помните, что ваш центрированный div должен иметь width свойство.

Этот метод работает практически со всеми браузерами.

HTML

Код

CSS

Код

.center-div
{
margin: 0 auto;
width: 100px;
}

See the Pen
Центрирование div на странице by Kocsten (@kocsten)
on CodePen.

Страна: (RU)

Kosten

Пятница, 31 Мая 2019 | Сообщение 3

Администраторы

Сообщений:44356

Награды: 70

« 554 »

Центрирование div внутри div - old-school

Автоматический трюк снова наносит удар, где внешний div может быть беспорядочным, но внутренний div должен иметь width свойство.

Этот метод работает практически со всеми браузерами.

HTML

Код

CSS

Код

.outer-div
{
     padding: 30px;
}
.inner-div
{
     margin: 0 auto;
     width: 100px;
}

See the Pen
Центрирование div внутри div, old-school by Kocsten (@kocsten)
on CodePen.

Страна: (RU)

Kosten

Пятница, 31 Мая 2019 | Сообщение 4

Администраторы

Сообщений:44356

Награды: 70

« 554 »

Центрирование div внутри div с помощью встроенного блока

Свойство text-align работает только на встроенных элементах. Значение inline-block отображает внутренний DIV в качестве встроенного элемента, а также блока, так что text-align свойство во внешнем DIV центров внутреннего DIV. С этим методом внутренний div не требует установленной ширины, где работает со всеми браузерами.

HTML

Код

CSS

Код

.outer-div
{
     padding: 30px;
     text-align: center;
}
.inner-div
{
     display: inline-block;
     padding: 50px;
}

See the Pen
Центрирование div внутри div с помощью встроенного блока by Kocsten (@kocsten)
on CodePen.

Страна: (RU)

Kosten

Пятница, 31 Мая 2019 | Сообщение 5

Администраторы

Сообщений:44356

Награды: 70

« 554 »

Центрирование div внутри div по горизонтали и вертикали

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

HTML

Код

CSS

Код

.outer-div
{
     padding: 30px;
}
.inner-div
{
     margin: auto;
     width: 100px;
     height: 100px;
}

See the Pen
Центрирование div внутри div, по горизонтали и вертикали by Kocsten (@kocsten)
on CodePen.

Страна: (RU)

Kosten

Пятница, 31 Мая 2019 | Сообщение 6

Администраторы

Сообщений:44356

Награды: 70

« 554 »

Вертикальный центр в делении с преобразованием

Используется transform для центрирования любого контента в div по вертикали. В этом случае этот метод использует пустой HTML- элемент в качестве контейнера p, где можете много обернуть в пустой элемент. Значение perspective уменьшает размывание на дисплеях с высоким разрешением, где вы можете поддерживать старые версии браузеров, используя префиксы поставщиков для transform, такие как -webkit-transformи -ms-transform.

HTML

Код

<div class="center-div"><p>Эссе Ауге Долор</p></div>

CSS

Код

.center-div p
{
     position: relative;
     top: 50%;
     transform: perspective(1px) translateY(-50%);
}

See the Pen
Вертикальный центр в делении с преобразованием by Kocsten (@kocsten)
on CodePen.

Страна: (RU)

Kosten

Пятница, 31 Мая 2019 | Сообщение 7

Администраторы

Сообщений:44356

Награды: 70

« 554 »

Центрирование div в нижней части страницы

Это использует маржу auto и абсолютный позиционный внешний div, где работает со всеми браузерами. Внутренний div должен иметь width свойство. Пробел в нижней части страницы задается в bottom свойстве внешнего div. Вы также можете центрировать div в верхней части страницы, заменяя bottom свойство на top.

HTML

Код

CSS

Код

.outer-div
{
     position: absolute;
     bottom: 30px;
     width: 100%;
}
.inner-div
{
     margin: 0 auto;
     width: 100px;
     height: 100px;
     background-color: #ccc;
}

See the Pen
Центрирование div в нижней части страницы by Kocsten (@kocsten)
on CodePen.

Страна: (RU)

Kosten

Пятница, 31 Мая 2019 | Сообщение 8

Администраторы

Сообщений:44356

Награды: 70

« 554 »

Центрирование div на странице, отзывчивый

Ширина div является отзывчивой, так как она соответствует размеру области просмотра. Он работает практически со всеми браузерами. Ваш центрированный div должен иметь max-width свойство.

HTML

Код

CSS

Код

.center-div
{
margin: 0 auto;
max-width: 700px;
}

See the Pen
Центрирование div на странице, отзывчивый by Kocsten (@kocsten)
on CodePen.

Страна: (RU)

Kosten

Пятница, 31 Мая 2019 | Сообщение 9

Администраторы

Сообщений:44356

Награды: 70

« 554 »

Просто inline-block элементов в центрированном контейнере, где также использует медиа-запросы CSS. Когда размер экрана меньше 600 пикселей, max-width свойство левого и правого делителей устанавливается на 100%.

Центрирование двух отзывчивых делителей рядом

HTML

Код

CSS

Код

.container
{
     text-align: center;
}
.left-div
{
     display: inline-block;
     max-width: 300px;
     vertical-align: top;
}
.right-div
{
     display: inline-block;
     max-width: 150px;
}
@media screen and (max-width: 600px)
{
     .left-div, .right-div
     {
          max-width: 100%;
     }
}

See the Pen
Центрирование двух отзывчивых делителей рядом by Kocsten (@kocsten)
on CodePen.

Страна: (RU)

Kosten

Пятница, 31 Мая 2019 | Сообщение 10

Администраторы

Сообщений:44356

Награды: 70

« 554 »

Это центрирует div как по горизонтали, так и по вертикали, используя CSS3 Flexbox. Свойство height в контейнере может быть что угодно, пока это больше чем центрированные дела. В этом примере мы используем vhвысоту окна браузера, область просмотра, а не высоту страницы. Для получения дополнительной информации о значениях области просмотра и их использовании см.

Flexbox div по центру

See the Pen
Flexbox, div по центру by Kocsten (@kocsten)
on CodePen.

Страна: (RU)

Kosten

Пятница, 31 Мая 2019 | Сообщение 11

Администраторы

Сообщений:44356

Награды: 70

« 554 »

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

Центрирование динамического div по горизонтали и вертикали

HTML

Код

CSS

Код

.outer-div
{
     display: table;
     position: absolute;
     height: 100%;
     width: 100%;
}
.mid-div
{
     display: table-cell;
     vertical-align: middle;
}
.center-div
{
     margin: 0 auto;
     width: 300px;
     height: 100px;
}

See the Pen
Центрирование динамического div, по горизонтали и вертикали by Kocsten (@kocsten)
on CodePen.

Свойства width и height в центрированной DIV может быть что угодно.

Страна: (RU)

Страница 1 из 1
1