Справочник · CSS

place-items: выравнивание в обе стороны

Короткое свойство сразу задаёт align-items и justify-items. Удобно центрировать содержимое ячейки grid.

Как это работает

place-items: center ставит содержимое по центру и по вертикали, и по горизонтали. Первое значение — вертикаль, второе — горизонталь. Если написано одно, оно используется для обеих. Это свойство грида. Во флексе для поперечной оси по-прежнему align-items, а вдоль оси — justify-content.

.hero {
  display: grid;
  min-height: 12rem;
  place-items: center;
}

Когда использовать

Один значок или короткое сообщение в квадратной области. Не центрируй так длинную статью.

Частые ошибки

• Ожидали эффект во flex-контейнере и не увидели его.
• Длинный абзац оказался узкой центрированной колонкой без max-width.
• Перепутали порядок осей.