Центрирование и позиционирование div внутри div CSS

Быстрый ответ

Если вам требуется прикрепить div к нижнему краю другого div, следует применить к дочернему элементу абсолютное позиционирование, используя свойства position: absolute;. При этом родительскому элементу необходимо задать относительное позиционирование через position: relative;. Положение дочернего элемента регулируется свойствами bottom и left.

.parent { position: relative; }
.child { position: absolute; bottom: 0; left: 0; } /* Теперь я прикреплен к нижнему краю! */

<div class="parent">
  <div class="child">Меня крепко удерживает дно!</div>
</div>

А чтобы выровнять div по центру внутри другого, воспользуйтесь свойством margin: 0 auto; и укажите width:

.child {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 50%; /* Установите необходимую ширину с учетом вашего дизайна! */
  margin: 0 auto;
} /* Ура, я расположен точно в центре! */

Итак, дочерний div сохранит свое место у основания и в центре родительского элемента, несмотря на любые изменения размеров окна браузера.

Продвинутое позиционирование при помощи Flexbox

Современные макеты часто создаются с помощью CSS Flexbox. Чтобы им воспользоваться, задайте div свойства flex-контейнера с помощью display: flex;. Для центрирования вертикального контента используйте justify-content: center;, а для выравнивания дочернего элемента внизу — свойство align-items: flex-end;.

.flex-container {
  display: flex;
  justify-content: center;
  align-items: flex-end; /* "Не поднимайтесь выше!" — командует Flexbox */
  height: 100%; /* "Растянуться на весь экран!" — предлагает CSS */
}

.child {
  /* Ширина остаётся без изменений */
}

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

Обеспечение кроссбраузерности

Flexbox — отличное средство, но важно помнить о кроссбраузерности:

• Для старых браузеров, например, IE6, стандартом выбирается абсолютное позиционирование.
• Будьте внимательны: прежде чем начать применение, ознакомьтесь с таблицами поддержки Flexbox.

Тестируйте ваши макеты в различных браузерах и на разных устройствах, чтобы убедиться в их одинаковом отображении. Именно в этом и заключается основное удовольствие программирования — универсальность на виду!

Визуализация

Например, можно представить, что вы крепите div (пусть будет 🚤) у нижнего края (или 🏖️) океана контента (🌊) другого div.

Океан пространства (🌊): [Безграничное пространство содержимого]
Корабль div (🚤): [Ваш позиционированный элемент]

Получается, мы ставим кораблик ВБЛИЗИ от нижнего берега:

🌊
🏖️...🚤 (Привет, чайки!)

Таким образом, настроенный div-корабль со свойством { position: absolute; bottom: 10px; } размещается внутри div-океана с relative позиционированием.

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

Для более наглядного представления позиционирования div элементов используйте свойства background-color и border:

.parent { background-color: lightblue; }

.child {
  background-color: coral;
  border: 1px solid black; /* Это границы моего пространства. */
}

Развитие адаптивного дизайна

Внешний div с изменяющейся высотой может вызвать дополнительные сложности. Будьте готовы к адаптивному позиционированию и используйте свойство min-height или единицы измерения vh, чтобы сохранять пропорции макета при изменении содержимого. Адаптивность — основа успеха!

Тонкая настройка позиционирования с использованием процентов

Если дочерний элемент должен быть расположен несколько выше нижнего края, замените bottom: 0; на bottom: 5%; или аналогичное значение в vh:

.child { position: absolute; bottom: 5%; } /* Дополнительные 5% для свободы и плавности! */

Проценты обеспечивают гибкую регулировку позиционирования элемента, учётом разных размеров внешнего div.

Полезные материалы

1. position – CSS: Каскадные таблицы стилей | MDN — Ваше руководство в мире CSS позиционирования.
2. z-index – CSS: Каскадные таблицы стилей | MDN — Ознакомьтесь с z-index и контекстами наложения, они могут быть весьма полезны.
3. A Complete Guide to Flexbox | CSS-Tricks — Ваш компас в мире flexbox.
4. Sticky Footer, Five Ways | CSS-Tricks — Изучите несколько способов создания "прилипающего" футера, ведь никто не любит "болтливые" колонтитулы!
5. How to keep your footer where it belongs ? — Методы, чтобы ваш футер всегда оставался внизу.
6. Just a moment... — Визуальное наслаждение техникой размещения с абсолютным позиционированием в рамках родительского контейнера с относительным.
7. CSS Layout – The position Property — Обзор возможностей свойства position в CSS.