CSS place-items — центрування елементів сітки одним рядком

CSS властивість place-items — скорочення для align-items і justify-items: як кожен елемент сидить у своїй комірці.

правити

Загальний опис

place-items: center у grid-контейнері — найкоротший спосіб центрувати вміст у комірках по обох осях. У парі з display: grid це дає знаменитий дворядковий рецепт ідеального центрування:

.center {
    display: grid;
    place-items: center;
}

Відмінність від place-content: content рухає всю сітку в контейнері, items — кожен елемент у своїй комірці. Коли сітка займає весь контейнер, різниці не видно; коли ні — це дві різні речі.

правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	59	45	11	46	79	—

Підтримка: мобільні переглядачі

Переглядач
	59	59	45	11

Приклади

+ запропонувати свій приклад у пісочниці

<div class="center">
    <button>По центру</button>
</div>

.center {
    display: grid;
    place-items: center;
    height: 200px;
    border: 1px dashed #999;
}