Инструкция по центрированию в CSS:
1) flex-контейнер:
display: flex;
justify-content: center;
align-items: center;
Вместо центровки контейнера можно блоку задать
align-self: center; или margin: auto;
2) Если контейнер имеет фикс ширины или она в процентах, то блок центрируем по горизонтально:
margin: 0 auto;
3) Можно использовать позиционирование, например:
.container {
border: 1px solid black;
position: relative;
width: 100%;
height: 100%;
}
.block {
border: 1px solid red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
4) Если известны размеры элемента:
.block {
border: 1px solid red;
width: 300px;
height: 300px;
position: absolute;
left: calc(50% - 300px / 2);
top: calc(50% - 300px / 2);
}
5) Если нужно строчный элемент центрировать по горизонтали в контейнере, то контейнеру задаем
text-align: center;
🔗Ссылка на полное руководство по центрированию
#css #центрирование