В глуши альтернативная реализация вертикального центрирования CSS

предисловие

Как мы все знаем, вопрос "Как CSS реализует вертикальное центрирование элементов?" уже является старомодным вопросом. Уже существует множество решений этой проблемы. Эти решения также имеют свои применимые сценарии и преимущества и недостатки, которые примерно следующим образом:

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

Итак, сегодня мы разберем принцип одного из эффективных, но не часто используемых решений, а именно:псевдоэлемент:beforeсоответствоватьvertical-align:middleДля достижения вертикального центрирования элементов, сначала посмотрите на конкретную реализацию кода:

<style type="text/css">
  .parent {
    display: inline-block;
    width: 300px;
    height: 300px;
    font-size: 0;
    background: #80848f;
    text-align: center;
  }
  .parent:before {
    display: inline-block;
    width: 20px;
    height: 100%;
    content: '';
    background: #ff9900;
    vertical-align: middle;
  }
  .child {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: #19be6b;
    vertical-align: middle;
  }
</style>

<div class="parent">
  <div class="child">child</div>
</div>

Результат выполнения приведенного выше кода таков:

Я полагаю, что все знакомы с кодом, но действительно ли вы понимаете принцип? Давайте посмотрим, как он шаг за шагом достигает вертикального центрирования.

анализировать

Прежде всего, нам нужно знать ключевой момент знаний, а именно:Положение базовой линии родительского элемента (базовой линии) можно изменить, оно не фиксируется, важно помнить

Далее упростим код и удалим ключевые части

<style type="text/css">
  .parent {
    display: inline-block;
    width: 300px;
    height: 300px;
    /* font-size: 0; */
    background: #80848f;
    text-align: center;
  }
  .parent:before {
    display: inline-block;
    width: 20px;
    height: 100%;
    content: '';
    background: #ff9900;
    /* vertical-align: middle; */
  }
  .child {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: #19be6b;
    /* vertical-align: middle; */
  }
</style>

<div class="parent">
  <div class="child">child</div>
</div>

мы будемfont-size:0а такжеvertical-align:middleПосле комментирования рабочий результат выглядит следующим образом:

Как видно из рисунка, для:beforeДля псевдоэлементов (далее псевдоэлементов) добавление и не добавлениеvertical-align:middle, результат тот же, он всегда будет заполнять родительский элемент по вертикали; но для.childЭлемент другой, его вертикальное положение изменилось, так почему же?

На самом деле роль псевдоэлементов здесьЧтобы изменить (или переопределить) положение базовой линии родительского элемента, Давайте рассмотримvertical-align:middleОпределение в документации MDN

middle: выравнивает середину элемента с базовой линией родительского элемента плюс половина x-высоты родителя

Итак, сравните наш пример:

Середина псевдоэлемента – это его вертикальная середина, что нетрудно понять
Базовую линию родительского элемента нам пока не важно, где она находится, нам просто нужно помнить, что ее можно изменить.
Половина x-height, потому что мы установили размер шрифта в 0 в родительском элементе, половина x-height (высота строчной буквы x) также равна 0, т.е. нет высоты

Таким образом, он эквивалентен средней точке псевдоэлемента, если он выровнен с базовой линией родительского элемента.Поскольку x-height равен 0, не имеет значения, добавлен он или нет; кроме того, элементы в Css по умолчанию выравниваются по верхнему левому краю, для этого ограничения, то есть когда добавляются псевдоэлементыvertical-align:middleПосле этого он не будет отображаться за рамками родительского элемента по умолчанию, тогда была определена высота псевдоэлемента: 100% от высоты родительского элемента, а также определена середина

Далее псевдоэлемент скажет родительскому элементу: Моя вертикальная середина определена, ее невозможно изменить, и невозможно изменить в этой жизни, но моя середина хочет совпасть с вашей базовой линией, сами видите вперед, продолжать

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

Наконец, элемент .child добавляет свой собственныйvertical-align:middle,согласно сmiddle: выравнивает середину элемента с базовой линией родительского элемента плюс половина x-высоты родителяЭто определение, размер шрифта элемента .child также равен 0 из-за отношения наследования, поэтому его средняя точка естественным образом выравнивается с базовой линией родительского элемента, который уже был определен, чтобы добиться вертикального центрирования, и это все .

Суммировать

На самом деле принцип этого метода вертикального центрирования в основном состоит из следующих моментов:

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

Пока мы понимаем принцип, нам не нужно запоминать код наизусть, и мы не забудем, как его реализовать; если в тексте есть ошибка, поправьте меня~

Для общей проблемы вертикального центрирования, какое решение является вашим любимым, оставьте сообщение для обсуждения~

насчет нас