• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Абсолютное центрирование с помощью CSS (Абсолютное центрирование по горизонтали и вертикали в CSS)
Абсолютное центрирование с помощью CSS
Kosten
Дата: Четверг, 2019-05-30, 03:25 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25244
Награды: 57


Также в этом посте узнаете, как вы можете центрировать 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
Дата: Пятница, 2019-05-31, 03:00 | Сообщение 2
Оффлайн
Администраторы
Сообщений:25244
Награды: 57


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

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

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

HTML

Код
<div class="center-div"></div>

CSS

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



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


Страна: (RU)
Kosten
Дата: Пятница, 2019-05-31, 03:03 | Сообщение 3
Оффлайн
Администраторы
Сообщений:25244
Награды: 57


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

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

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

HTML

Код
<div class="outer-div"><div class="inner-div"></div></div>

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
Дата: Пятница, 2019-05-31, 03:07 | Сообщение 4
Оффлайн
Администраторы
Сообщений:25244
Награды: 57


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

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

HTML

Код
<div class="outer-div"><div class="inner-div"></div></div>

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
Дата: Пятница, 2019-05-31, 03:10 | Сообщение 5
Оффлайн
Администраторы
Сообщений:25244
Награды: 57


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

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

HTML

Код
<div class="outer-div"><div class="inner-div"></div></div>

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
Дата: Пятница, 2019-05-31, 03:13 | Сообщение 6
Оффлайн
Администраторы
Сообщений:25244
Награды: 57


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

Используется 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
Дата: Пятница, 2019-05-31, 03:16 | Сообщение 7
Оффлайн
Администраторы
Сообщений:25244
Награды: 57


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

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

HTML

Код
<div class="outer-div"><div class="inner-div"></div></div>

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
Дата: Пятница, 2019-05-31, 03:20 | Сообщение 8
Оффлайн
Администраторы
Сообщений:25244
Награды: 57


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

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

HTML

Код
<div class="center-div"></div>

CSS

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



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


Страна: (RU)
Kosten
Дата: Пятница, 2019-05-31, 03:25 | Сообщение 9
Оффлайн
Администраторы
Сообщений:25244
Награды: 57


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

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

HTML

Код
<div class="container"><div class="left-div"></div><div class="right-div"></div></div>

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
Дата: Пятница, 2019-05-31, 03:27 | Сообщение 10
Оффлайн
Администраторы
Сообщений:25244
Награды: 57


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

Flexbox div по центру


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


Страна: (RU)
Kosten
Дата: Пятница, 2019-05-31, 03:31 | Сообщение 11
Оффлайн
Администраторы
Сообщений:25244
Награды: 57


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

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

HTML

Код
<div class="outer-div"><div class="mid-div"><div class="center-div"></div></div></div>

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)
Форум » Web-Раздел » Начинающему вебмастеру » Абсолютное центрирование с помощью CSS (Абсолютное центрирование по горизонтали и вертикали в CSS)
  • Страница 1 из 1
  • 1
Поиск: