Различные реализации центрирования CSS

CSS

Как добиться идеального центрирования в CSS всегда было головной болью для фронтенд-инженеров. недавно прочиталCSS-TRICKSПост в Стратегии решения проблемы центрирования. Я чувствую, что многое приобрел, и я перевел его для всех, чтобы обменяться и узнать.
Когда мы пишем CSS, центрирование элементов — одна из самых горячих точек жалоб: почему это так сложно?
Я думаю, что суть проблемы не в том, как это сделать, а в том, как мы выбираем из множества методов центрирования то, что подходит для текущей ситуации.
Итак, давайте вместе создадим дерево решений, надеясь упростить центрирование.

Центрировано по горизонтали

встроенный элемент

Мы можем центрировать встроенный элемент, выполнив следующие действия с его родительским блочным элементом. применять кinline,inline-block,inline-table,inline-flexЖдать.

.center-children{
  text-align: center;
}

Пример:портал

элемент блочного уровня

Мы можем использовать элемент уровня блокаmargin-leftа такжеmargin-rightТакже установлен наautoчтобы центрировать его.(Примечание. На этом этапе элемент должен быть определен с помощьюwidth, иначе он заполнит ширину, не говоря уже о горизонтальном центре. )Обычно определяется следующим сокращением:

.center-me {
  margin: 0 auto;
}

Пример:портал

Несколько элементов блочного уровня

Когда два или более элемента уровня блока в одной строке должны быть центрированы, мы должны изменитьdisplayтип для реализации. Следующие примеры будутdisplayУстановить какinline-blockтак же какflexboxпример.

Пример:портал

Когда вы ссылаетесь на несколько элементов уровня блока в одном и том же столбце, поместитеmarginустановить какautoтехнология действует до сих пор.

Пример:портал

Центрировать по вертикали

Чтобы сделать центрирование по вертикали в CSS, нам нужно немного посложнее.

встроенный элемент

одна линия

Иногда встроенные элементы или текст могут быть центрированы по вертикали просто потому, что элементы выше и нижеpaddingравный.

.link {
  padding-top: 30px;
  padding-bottom: 30px;
}

Пример:портал

в некоторых случаях, когдаpaddingНе применимо, и текст не будет переноситься, есть хитрость: когдаline-heightа такжеheightПри равенстве текст центрируется по вертикали.

.center-text-trick {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}

Пример:портал

Многострочный

вверх и внизpaddingРавенство по-прежнему решает проблему. Но когда этот метод не действует, возможно, элемент или текст находится вtable cellв, илиhtmlсемантическиtable, либоCSSнастройки в . В этом случае мы используемvertical-alignдля завершения вертикального центрирования. Примечание. Это специальное использование,vertical-alignОбычно используется для определения того, как расположены элементы в строке.

Пример:портал

если что-то вродеtableкогда они не работают, может быть, мы должны попробовать следующийflexbox. существуетflex, дочерний элемент может быть легко центрирован внутри родительского элемента.

flex-center-vertically {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}

Пример:портал

Помните, что это будет работать только в том случае, если элемент abs имеет фиксированную высоту (px, % и т. д.).
Если ни один из вышеперечисленных подходов не работает, то мы можем использовать технику «элемента-призрака». При таком подходе псевдоэлемент занимает всю высоту родительского элемента, а текст центрируется внутри него по вертикали.

.ghost-center {
  position: relative;
}
.ghost-center::before {
  content: " ";
  display: inline-block;
  height: 100%;
  width: 1%;
  vertical-align: middle;
}
.ghost-center p {
  display: inline-block;
  vertical-align: middle;
}

Пример:портал

элемент блочного уровня

когда известен рост

По многим причинам мы не можем знать высоту элемента во многих случаях, например: при изменении ширины перерисовка текста изменит высоту; изменение стиля текста может изменить высоту; изменение числа текста может изменяться высота; соотношение сторон фиксировано Элементы, такие как изображения, изменяют высоту при изменении размера и т. д.
Но когда мы знаем высоту, мы можем добиться вертикального центрирования следующим образом:

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}

Пример:портал

когда высота неизвестна

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

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Пример:портал

можно использоватьflexboxВремя

Не большой сюрприз, вflexbox, это намного проще.

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

Пример:портал

Центрировать как по горизонтали, так и по вертикали

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

Когда ширина и высота элемента фиксированы

На этом этапе вы можете использовать абсолютное позиционирование, чтобы расположить элемент в позиции родительского элемента (50%, 50%), а затем использоватьmarginУстановите отрицательное значение. Этот метод имеет широкую поддержку браузеров.

.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;
}

Пример:портал

Когда ширина и высота элемента не фиксированы

Когда ширина и высота не фиксированы, мы можем использоватьtransformсвойство для перемещения элемента на 50% в обоих направлениях одновременно. Ширина основана на ширине текущего элемента.

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Пример:портал

можно использоватьflexboxВремя

На данный момент нам нужно использовать два свойства центрирования:

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

Пример:портал

Дополнение дополнительным методом, который очень совместим

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

В заключение

Мы можем добиться центрирования полностью в CSS.

Переведено с:CSS-tricks.com/centering — Из…

Категории