• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Выравнивание блока div по центру при помощи CSS (Вертикальное и горизонтальное выравнивание блока по центру)
Выравнивание блока div по центру при помощи CSS
Kosten
Дата: Понедельник, 2018-02-19, 21:19 | Сообщение 1
Администраторы
Сообщений:18737
Награды: 55


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

Таким образом, чтобы получить контейнер шириной и высотой 200 пикселей с содержащимся центральным элементом ширины и высоты 50px, что просто дайте содержащему элементу ширину и высоту, где будет ровняться 50 пикселей. Как уже упоминалось, этот метод вероятно является наименее изящным из трех, что будут представлены здесь. И как знаете, если делать через CSS, то здесь блок лучше всего поддерживается в старых браузерах, не говоря о новых с обновлением.

Вот как выглядит код и результаты:



HTML

Код
<div id="sakivtun" class="zornet_ru_gsan">
  <div class="makogamus"></div>
</div>

CSS

Код
.zornet_ru_gsan {
    margin: 53px auto;
    background-color: #e2e2e2;
    text-align: center;
    border: 1px solid;
    border-radius: 6px;
    box-shadow: 0 1px 6px, 0 1px 2px 0px #949090;
}

.makogamus {
    width: 50px;
    height: 50px;
    background-color: #d7faff;
    border: 1px solid;
}

#sakivtun {
  width: 50px;
  height: 50px;
  padding: 75px;
}

Вся цветовая палитра происходит в настройке стилей CSS. Это также касается самой формы и теней.

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

2. Преобразование

Этот метод основан на свойстве преобразования CSS3. Он дополнительно полагается на свойство position. Этот метод, как и первый метод не отличается большой элегантностью, однако вам не придется делать никаких дополнительных вычислений или жесткого кодирования значений, чтобы заставить его работать.

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



HTML

Код
<div id="sakivtun" class="zornet_ru_laguntuk">
  <div class="gtulomesanta"></div>
</div>

CSS

Код
.zornet_ru_laguntuk {
    margin: 64px auto;
    width: 200px;
    height: 200px;
    background-color: #dedada;
    text-align: center;
    border: 1px solid;
    border-radius: 6px;
    box-shadow: 0 1px 12px 1px, 0 1px 12px #f5efef;
}

.gtulomesanta {
    width: 50px;
    height: 50px;
    background-color: #e8ffe7;
    border: 1px solid;
}

#sakivtun {
  position: relative;
}

#sakivtun .gtulomesanta {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

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

3. Flex

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

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

Код и результаты выглядят следующим образом:



HTML

Код
<div id="flex" class="kazerdumiglas">
  <div class="gerizobersa"></div>
</div>

CSS

Код
.kazerdumiglas {
    margin: 64px auto;
    width: 200px;
    height: 200px;
    background-color: #d0c7c7;
    text-align: center;
    border: 1px solid;
    border-radius: 6px;
    box-shadow: 0px 3px 7px 0px, 0 1px 12px #eaeaea;
}

.gerizobersa {
    width: 50px;
    height: 50px;
    background-color: #fffdfd;
    border: 1px solid;
}

#flex {
  display: flex;
  align-items: center;
  justify-content: center;
}

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

Итак, у вас есть 3 способа центрирования элементов с помощью CSS. Метод прокладки, вероятно, самый старый и наиболее поддерживаемый подход, но вам нужно будет сделать некоторые расчеты, чтобы он выглядел как можно лучше. Использование свойства transform основывается на совместимости с CSS3, но не требует специальных вычислений.
Прикрепления: 9723319.png(2.4 Kb) · 5446112.png(3.0 Kb) · 0788495.png(2.7 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Выравнивание блока div по центру при помощи CSS (Вертикальное и горизонтальное выравнивание блока по центру)
  • Страница 1 из 1
  • 1
Поиск: