Для позиционирования элемента по центру можно использовать следующие свойства CSS:
- Для блочных элементов:
- margin: 0 auto; — устанавливает автоматические отступы сверху и снизу, а по горизонтали центрирует элемент относительно родительского блока.
- display: flex; justify-content: center; align-items: center; — устанавливает элементу flex-контейнер и центрирует его содержимое по горизонтали и вертикали.
- position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); — устанавливает элементу абсолютное позиционирование и с помощью transform центрирует его относительно родительского блока.
- Для инлайн-элементов:
- text-align: center; — центрирует содержимое элемента по горизонтали.
- line-height: height-of-parent-element; text-align: center; — центрирует содержимое элемента по вертикали и горизонтали, если задать высоту родительского элемента.
- display: inline-block; vertical-align: middle; — центрирует элемент по вертикали относительно родительского элемента.