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 — кожен елемент у своїй комірці. Коли сітка займає весь контейнер, різниці не видно; коли ні — це дві різні речі.

правити

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

Переглядачі

Переглядачів ще не додано.

Приклади

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

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

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