В этой статье Практики HTML, мы познакомимся с тремя техниками центрирования блока
Margin+width
Этот фокус позволяет центрировать блок заранее определённой ширины, независимо от ширины экрана. Кроме того, если использовать max-width вместо width, то, даже если размер экрана пользователя окажется меньше ширины этого блока, то блок не выйдет за границы экрана, а будет равен ширине экрана. Это весьма распространенная практика.
Техника проста:
margin: 0 auto;
max-width: 500px;
и ваш блок (именно блочный элемент, а не строчный) окажется ровно в центре страницы.
Весь код может быть таким:
Значение auto для горизонтальных маргинов устанавливает их одинаковыми с двух сторон, что и центрирует блок
Посмотрите код здесь, поиграйте со значениями и полученные знания закрепятся быстрее:
https://codepen.io/artik-man/pen/vYBKYeZ
Flexbox
Существуют и другие способы. Одним из самых современных, но немного более сложных, является использование flexbox.
Применение флексбокса позволяет вообще не задавать ширину блока. Ширина будет подстраиваться под контент, размещенный в блоке. Посмотреть на результат можно тут:
https://codepen.io/artik-man/pen/rNBLNKa
Absolute
Следующая техника предполагает использование абсолютно-спозиционированного блока. Здесь также можно не задавать ширину блока и он будет подстраиваться под ширину контента.
Обязательным является объявление родительского контейнера с
position: relative | absolute | fixed. Внутри статичных контейнеров таким образом спозиционироваться мы не сможем.
Объявляем блок абсолютно спозиционированным, смещаем его слева направо на 50%, относительно ширины родительского контейнера. В седьмой строчке кода прижимаем блок к верхней части контейнера.
При помощи свойства transform и его функции translate, отодвинем блок влево на 50% от ширины этого блока.
Для чего нам translate? Дело в том, что в CSS, началом координат является верхняя левая точка элемента, а не центр элемента. Поэтому нам не достаточно просто подвинуть блок на 50% вниз и вправо, так как тогда в центре контейнера окажется левый верхний угол блока, а не центр блока.
Важно помнить, о побочном действии этой техники: высота контейнера станет равна нулю.
Пример доступен по этой ссылке:
https://codepen.io/artik-man/pen/MWgeWLW
Эту и другие статьи можно почитать в моём практическом руководстве HTML Practice: https://artik-man.github.io/HTML-Practice/ Если у вас возникли идеи для новой главы этой книги, присылайте issue на GitHub: https://github.com/Artik-Man/HTML-Practice/issues