• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Центрирование div неизвестной высоты и ширины (Центрирование объекта в горизонтальном и вертикальном виде)
Центрирование div неизвестной высоты и ширины
Kosten
Дата: Среда, 29.08.2018, 01:33 | Сообщение 1
Администраторы
Сообщений:18238
Награды: 55


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

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



HTML

Код
<div class="objectas-centering">Центрирование div</div>


CSS

Код
.objectas-centering {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}


Второй вариант, что тоже считается простым и надежным

Код
.objectas-centering{
    margin:0 auto;
    width:150px;
    height:150px;
}


Чтоб выставить центрирования в горизонтальном виде, то здесь нужно выставить ширину, где будет значение auto отвечать отступы по обеим сторонам левого и правого отступа, где используем стили. Такой метод отлично работает с блочными элементами, как div, p, h1, прочее.

Следующий вариант по выравнивание по горизонтали и вертикали

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

Код
.objectas-centering{
width:500px;
height:300px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -150px;
}


Здесь просто нужно вписать 50% для значений left и top и после этого объект выставится ровно по центру. Здесь нужно знать, что необходимо сделать, это выставить элемент объекта на заданную половину высоты, там и по ширине влево и по вверх, все делается для того, чтоб он находился в центре.

Демонстрация
Прикрепления: 7372480.png(3.4 Kb)
Страна: (RU)
Kosten
Дата: Вторник, 04.09.2018, 20:48 | Сообщение 2
Администраторы
Сообщений:18238
Награды: 55


Каждый разработчик неизбежно обнаруживает, что центрирование div не так очевидно, как вы ожидали. Центрировать то, что находится внутри div горизонтально легко, но тогда все становится немного липким. Когда вы достигаете центрирования div по вертикали, вы можете оказаться в мире CSS.

Цель этой статьи - показать, как с помощью нескольких трюков CSS любой div может быть центрирован, горизонтально и вертикально или внутри страницы div или любой элемент.

HTML

Код
<div class="enteri-ngbasic"></div>


CSS

Код
.enteri-ngbasic
{
  margin: 0 auto;
  width: 100px;
  height: 100px;
  background-color: #365694;
  border-radius: 3px;
}


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

Демонстрация
Страна: (RU)
Kosten
Дата: Вторник, 04.09.2018, 20:56 | Сообщение 3
Администраторы
Сообщений:18238
Награды: 55


ЦЕНТРИРОВАНИЕ DIV В DIV, СТАРАЯ ШКОЛА

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



HTML

Код
<div class="koled-sucsol"><div class="dukosami-lpesam"></div></div>


CSS

Код
.koled-sucsol
{
  padding: 30px;
  background-color: #e4e0e0;
}
.dukosami-lpesam
{
  margin: 0 auto;
  width: 100px;
  height: 100px;
  background-color: #807c7c;
  border-radius: 50px;
}


Автоматический трюк маржи снова наносит удар, где внешний div может быть беспорядочным, но внутренний div должен иметь width свойство.
Прикрепления: 2304071.png(4.6 Kb)
Страна: (RU)
Kosten
Дата: Вторник, 04.09.2018, 21:18 | Сообщение 4
Администраторы
Сообщений:18238
Награды: 55


ЦЕНТРИРОВАНИЕ DIV ПО ГОРИЗОНТАЛИ И ВЕРТИКАЛИ

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



HTML

Код
<div class="vertical-bukopesa"><div class="alomethod-trsaus"></div></div>


CSS

Код
.vertical-bukopesa
{
  padding: 30px;
  background-color: #abbefd;
}
.alomethod-trsaus {
    margin: auto;
    width: 100px;
    height: 100px;
    background-color: #716d6d;
    border-radius: 50px;
}


Внутренний div должен иметь свойство width и height свойство. Это не работает, если внешний div имеет фиксированную высоту.
Прикрепления: 8923149.png(4.6 Kb)
Страна: (RU)
Kosten
Дата: Вторник, 04.09.2018, 21:25 | Сообщение 5
Администраторы
Сообщений:18238
Награды: 55


ВЕРТИКАЛЬНЫЙ ЦЕНТР В DIV С ПРЕОБРАЗОВАНИЕМ

Это используется transformдля центрирования любого содержимого в div по вертикали. В этом случае этот метод использует пустой элемент HTML в качестве контейнера p. Вы можете много обернуть в пустой элемент.



HTML

Код
<div class="pegormance-kerunning"><p>ZorNet.Ru - портал вебмастера</p></div>


CSS

Код
.pegormance-kerunning
{
  margin: 0 auto;
  max-width: 380px;
  height: 155px;
  background-color: #ddd;
  border-radius: 27px;
}
.pegormance-kerunning p
{
  position: relative;
  top: 50%;
  transform: perspective(1px) translateY(-50%);
  padding: 30px;
}


Значение perspective уменьшает размывание на дисплеях с высоким разрешением. Вы можете поддержать более ранние версии браузеров используя префиксы для transform, например -webkit-transformи -ms-transform..

Трансформация поддерживается Chrome 63+, IE11, Microsoft Edge 16+, Firefox 57+, Safari 11+, iOS Safari 11.2+ и Chrome для Android 62+.
Прикрепления: 7295270.png(7.2 Kb)
Страна: (RU)
Kosten
Дата: Вторник, 04.09.2018, 21:32 | Сообщение 6
Администраторы
Сообщений:18238
Награды: 55


ЦЕНТРИРОВАНИЕ DIV В НИЖНЕЙ ЧАСТИ СТРАНИЦЫ

Это использует маржу auto и абсолютный внешний div. Такой вариант работает со всеми браузерами.



HTML

Код
<div class="norking-tomprove"><div class="curentol-vailable"></div></div>


CSS

Код
.norking-tomprove
{
  position: absolute;
  bottom: 25px;
  width: 100%;
}
.curentol-vailable {
    margin: 0 auto;
    width: 100px;
    height: 100px;
    background-color: #415382;
    border-radius: 97px;
}


Внутренний div должен иметь width свойство. Разрыв со дна страницы задается в bottom свойстве внешнего div. Вы также можете центрировать div в верхней части страницы, заменив bottom свойство на top.
Прикрепления: 2903306.png(4.3 Kb)
Страна: (RU)
Kosten
Дата: Вторник, 04.09.2018, 21:37 | Сообщение 7
Администраторы
Сообщений:18238
Награды: 55


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

Это снова использует маржу auto и абсолютный позиционный div. Где аналогично корректно работает со всеми браузерами.



HTML

Код
<div class="nativan-eamwokes"></div>


CSS

Код
.nativan-eamwokes {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background-color: #2d843b;
    border-radius: 85px;
}


У div должно быть свойство width и height свойство.
Прикрепления: 2912468.png(3.5 Kb)
Страна: (RU)
Kosten
Дата: Вторник, 04.09.2018, 21:42 | Сообщение 8
Администраторы
Сообщений:18238
Награды: 55


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

Ширина div является отзывчивой, поскольку она реагирует на размер окна просмотра. Он работает практически со всеми браузерами.



HTML

Код
<div class="resoluti-equiring"></div>


CSS

Код
.resoluti-equiring
{
  margin: 0 auto;
  max-width: 570px;
  height: 100px;
  background-color: #c11c58;
  border-radius: 5px;
}

Ваш центрированный div должен иметь max-width свойство.
Прикрепления: 8682637.png(2.6 Kb)
Страна: (RU)
Kosten
Дата: Вторник, 04.09.2018, 21:47 | Сообщение 9
Администраторы
Сообщений:18238
Награды: 55


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

Внутренний div является отзывчивым и будет корректно работать со всеми браузерами.



HTML

Код
<div class="display-kouton"><div class="intern-eringus"></div></div>


CSS

Код
.display-kouton
{
  padding: 28px;
  background-color: #a2a2a2;
}
.intern-eringus
{
  margin: 0 auto;
  max-width: 453px;
  height: 100px;
  background-color: #3472b5;
  border-radius: 10px;
}


Внутренний div должен иметь max-width свойство.
Прикрепления: 9865376.png(3.2 Kb)
Страна: (RU)
Kosten
Дата: Вторник, 04.09.2018, 22:05 | Сообщение 10
Администраторы
Сообщений:18238
Награды: 55


Центрирование двух div блока



HTML

Код
<div class="plementation"><div class="reased-gam tukidsa">Реализации DirectX 11 и 12 теперь основаны на Vulkan, что привело к улучшению совместимости игр и снижению производительности.</div><div class="paboties-saeatured graserin">Игры Windows без текущей версии Linux теперь установлены.</div></div>


CSS

Код
.plementation
{
  text-align: center;
  padding: 10px;  
}
.reased-gam {
    display: inline-block;
    max-width: 295px;
    text-align: left;
    padding: 25px;
    background-color: #1e385f;
    border-radius: 3px;
    margin: 10px;
    vertical-align: top;
}
.paboties-saeatured {
    display: inline-block;
    max-width: 148px;
    text-align: left;
    padding: 25px;
    background-color: #125025;
    border-radius: 3px;
    margin: 10px;
}
.tukidsa, .graserin
{
  font: 15px 'Source Code Pro', monospace;
    color: #f4f6f7;
}
@media screen and (max-width: 600px)
{
  .reased-gam, .paboties-saeatured
    {
       max-width: 100%;
    }
}


Просто inline-block элементов внутри центрированного контейнера. Это также использует запросы мультимедиа CSS. Когда размер экрана меньше 600 пикселей, max-widthсвойство обоих левого и правого div установлено на 100%.
Прикрепления: 0632777.png(11.5 Kb)
Страна: (RU)
Kosten
Дата: Вторник, 04.09.2018, 22:13 | Сообщение 11
Администраторы
Сообщений:18238
Награды: 55


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

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



HTML

Код
<div class="reducede-rormance"><div class="mopleme-natio"><div class="reprod-ucedgun"></div></div></div>


CSS

Код
.reducede-rormance
{
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}
.mopleme-natio
{
  display: table-cell;
  vertical-align: middle;
}
.reprod-ucedgun
{
  margin: 0 auto;
  width: 275px;
  height: 100px;
  background-color: #1b6a73;
  border-radius: 7px;
}


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

Дисплей таблицы поддерживается Chrome 63+, IE11, Microsoft Edge 16+, Firefox 57+, Safari 11+, iOS Safari 11.2+ и Chrome для Android 62+.
Прикрепления: 9180320.png(2.5 Kb)
Страна: (RU)
Kosten
Дата: Вторник, 04.09.2018, 22:22 | Сообщение 12
Администраторы
Сообщений:18238
Награды: 55


Flexbox, div centered

Это центрирует div как по горизонтали, так и по вертикали, ult nfr;t используется Flexbox, модуль компоновки Flexible Box CSS3.



HTML

Код
<div class="compan-vitalizing"><div class="dokilosa-leasingta"></div><div>


CSS

Код
.compan-vitalizing
{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.dokilosa-leasingta
{
  background-color: #297d82;
  border-radius: 17px;
  width: 215px;
  height: 100px;
}


Свойство height в контейнере может быть что угодно, пока это больше чем центрированные блоки. В этом примере мы используем vh, что является высотой окна браузера, видового экрана, а не высоты страницы. Дополнительные сведения о значениях видовых экранов и их использовании см, использование vw и vh.
Прикрепления: 8314291.png(2.9 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Центрирование div неизвестной высоты и ширины (Центрирование объекта в горизонтальном и вертикальном виде)
  • Страница 1 из 1
  • 1
Поиск: