Центрирование по горизонтали и вертикали для более глубокого копания

внешний интерфейс CSS
Центрирование по горизонтали и вертикали для более глубокого копания

В предыдущей статье --Магия одной строки кода CSSВ конце упоминаются два быстрых способа достижения горизонтального и вертикального центрирования.

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

Ага? То есть:

  • Есть так много способов горизонтального и вертикального центрирования, если вам действительно нужно использовать это в бизнесе, какой из них вы придумаете в первую очередь?
  • Разные методы горизонтального и вертикального центрирования, они должны быть разными, так в чем же самая существенная разница?
  • Существует ли так называемая идеальная горизонтальная и вертикальная центровка?

В этой статье будут рассмотрены 4 способа горизонтального и вертикального центрирования соответственно, и см. рисунок ниже с точки зрения каждого имени:

  1. absolute: position: absoluteСотрудничатьtop:50%;left:50%;transform:translate(-50%, -50%)
  2. autobot: display:flexСотрудничатьmargin:auto
  3. flex: display:flexСотрудничатьalign-items:center,justify-content:center
  4. grid: display:gridСотрудничатьplace-content:center;

Центрировать один элемент

Для такой простой структуры:

<div class="g-container">
    <div class="sub"></div>
</div>

С точки зрения центрирования одного элемента, все вышеперечисленные 4 метода хороши, без проблем.

CodePen Demo -- Centering in CSS

Центрировать несколько элементов

Для следующей чуть более сложной структуры:

<div class="g-container">
    <div class="sub">1</div>
    <div class="sub">123</div>
    <div class="sub">123456</div>
</div>

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

.sub {
    border: 1px solid deeppink;
    padding: 10px;
    border-radius: 5px;
}

Посмотрите, как это получается:

CodePen Demo -- Centering in CSS 2

Простой анализ анализа:

  1. absoluteОчевидно, есть проблема с методом, потому что используется абсолютное позиционирование, фактически 3 дочерних элемента складываются
  2. flexа такжеgridметод, если вы не добавите вручную поля (маржу или зазор), он слипнется
  3. Если направление не ограничено, флекс по умолчанию располагается горизонтально, а грид — вертикально
  4. очень важный момент,gridширина дочерних элементов под макетом,Ширина всех дочерних элементов будет принудительно растянута до ширины содержимого самого широкого дочернего элемента.

Для нескольких дочерних элементовabsoluteМетод явно неприменим.Дальше мы в основном рассмотрим различия в некоторых деталях оставшихся трех методов.

интервал управления

Что, если мы хотим контролировать расстояние между каждым элементом? мы даемautobot,flex,gridКонтейнеры каждого добавленияgap: 5px, а затем посмотрите на:

.g-container{
    gap: 5px;
}

CodePen Demo -- Centering in CSS 3

  1. margin: autoИз-за необходимости разделить оставшееся пространство поровну, производительность не очень хорошая и не может быть такой, как мы предполагали.5pxширина в пространстве

Сделать элементы переполненными

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

Вот еще один, расположенный вертикально:

CodePen Demo -- Centering in CSS 4

можно увидеть:

  1. Очень важный момент, так как нетоставшееся место,margin: autoРавномерно распределить уже не получится, по центру по горизонтали и по вертикали, но одна сторона прикреплена к контейнеру, а другая сторона переливается
  2. flexа такжеgridДаже если он превышает пространство контейнера, он все равно центрирован по горизонтали и вертикали.

В заключение

Из приведенных выше DEMO видно, что среди наиболее часто используемых схем горизонтальной и вертикальной центровки.flexРешение должно быть лучшим выбором на данный момент, оно может поддерживать горизонтальное и вертикальное центрирование внутренних элементов в различных средах и не меняет некоторые характеристики дочерних элементов:

  1. Удобная горизонтальная и вертикальная центровка отдельных элементов
  2. Удобно центрировать несколько элементов по горизонтали и вертикали, будь то по горизонтали, вертикали или за ее пределами
  3. Очень удобно контролировать расстояние между дочерними элементами
  4. Не изменяет ширину дочерних элементов

Конечно, ложка дегтя в том, что, условно говоря, для набора может потребоваться еще несколько символов. :покраснел:

а такжеmargin: autoа такжеgridЕсть более-менее мелкие проблемы.absoluteНе справляется с несколькими элементами.

наконец

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

Например, вы можете сравнить стиль письмаwriting-modeВ разных сценариях упомянутые выше методы горизонтального и вертикального центрирования похожи и различны и так далее.

Ну вот и подошла к концу эта статья, надеюсь она вам поможет :), если хотите получить самую интересную информацию о CSS, не пропустите мой официальный аккаунт --Интересные факты о внешнем интерфейсе iCSS

Другие замечательные технические статьи по CSS собраны в моемGithub -- iCSS, продолжайте обновлять, добро пожаловать, нажмите звездочку, чтобы подписаться на коллекцию.

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

Категории