Использование flex
для центрирования в CSS - это, пожалуй, самый правильный вариант сегодня.
.gentle-flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1ch;
}
Но это далеко не единственный вариант.
Давайте представим, что вам необходимо выровнять по горизонтали несколько inline-*
элементов. text-align: center;
сделает это буквально в одну строку.
See the Pen
Centering Inline Elements by Chris Coyier (@chriscoyier)
on CodePen.
А что, если вам надо отцентрировать эти же элементы относительно родительского элемента? Это легко сделать с помощью width: fit-content
для родительского контейнера.
See the Pen
Centering Unknown Width Parent by Chris Coyier (@chriscoyier)
on CodePen.