Центрирование span в div по вертикали в CSS: подробное руководство

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

Для вертикального центрирования элемента <span> в контейнере div родительскому элементу div назначаются свойства display: flex; и align-items: center;:

<div style="display: flex; align-items: center; height: 50px;">
  <span>Центрированный текст как гармония Вселенной.</span>
</div>

Благодаря Flexbox элементы можно удобно выравнивать по вертикали, не вдающись в борьбу с отступами или не прибегая к абсолютному позиционированию.

Прямой подход – Высота строки

Если требуется центрировать одну строку текста внутри div, для <span> устанавливается значение line-height, равное высоте родительского div:

div {
  height: 50px;
}

span {
  line-height: 50px;
}

Таким образом текст встанет строго по центру благодаря свойству line-height, которое обеспечивает выравнивание с учетом верхних и нижних подстрочных элементов.

Касание волшебника – Позиционирование и трансформации

Для более нестандартных решений можно применить сочетание относительного и абсолютного позиционирования с применением transform:

div {
  position: relative;
  height: 50px;
}

span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Применяя эти свойства, элемент <span> расположится в точности по центру div, независимо от его размеров. Благодарность CSS-трансформациям!

Учесть публику – Несколько span

Если имеется несколько элементов <span>, следующий подход обеспечит их идеальное центрирование:

div {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

span {
  margin: auto;
}

Внимание на зазор – Отступы и границы

Если вы сомневаетесь в использовании padding и border, можете не беспокоиться:

div {
  display: flex;
  align-items: center;
  padding: 10px; 
  box-sizing: border-box;
}

Применяя box-sizing: border-box;, можно забыть о проблемах, связанных с изменением размеров из-за внутренних отступов и границ.

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

Центрирование <span> внутри div можно сравнить с балансом на качелях:

Фундамент качель:           [Левое кресло] – [Опора] – [Правое кресло]
Структура HTML:    [Верх div] – [Центр по вертикали] – [Низ div]

Сохранение баланса на качелях (уровень начинающего):

[🍃] ---- 🧍 ---- [🍃]

Просто обычный день, когда нужно функционировать в роли Человеческой Опоры™.

Центрирование <span> (высокий уровень в HTML):

[🛑 верх div] ---- [🧍 <span>] ---- [🛑 низ div]

В обоих случаях, учтя логику баланса, мы становимся мастерами искусства CSS:

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

Наслаждаемся идеально центрированным <span>.

Альтернативы центрирования

1. display: inline-block с vertical-align:middle: Используйте vertical-align: middle; вместе с псевдоэлементом для выравнивания в линии элементов.

div:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  width: 0;
}

span {
  display: inline-block;
  vertical-align: middle;
}

2. Метод display:table-cell: Оформление в стиле таблиц с помощью display: table; и display: table-cell; в сочетании с vertical-align: middle; также может оказаться эффективным.

div {
  display: table;
}

span {
  display: table-cell;
  vertical-align: middle;
}

3. Адаптивность для мобильных устройств: Не забудьте про комфорт использования на мобильных устройствах. В этом контексте flexbox и transform остаются незаменимыми инструментами:

@media (max-width: 768px) {
  div {
    display: flex;
    align-items: center;
  }
}

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

1. Центрирование в CSS: Полное руководство | CSS-Tricks — полное описание всех аспектов центрирования в CSS.
2. Основные понятия Flexbox – CSS: Каскадные таблицы стилей | MDN — всё, что вам нужно знать о Flexbox без ненужных сложностей.
3. css – Как вертикально выровнять изображение внутри div – Stack Overflow — полезная находка для практических примеров вертикального выравнивания.
4. Полное руководство по Flexbox | CSS-Tricks — глубокий дайв в магию Flexbox.
5. Что происходит, когда вы создаете Flexbox контейнер? — Smashing Magazine — научный подход к разгадке тайн Flexbox.
6. vertical-align | Codrops — подробный обзор свойства vertical-align.
7. Визуальное руководство по свойствам CSS3 Flexbox | DigitalOcean — Flexbox становится более понятным благодаря этому иллюстрированному руководству.