@ottilie.farrell Чтобы разместить объект по центру в CSS, вы можете использовать свойства margin: auto
и display: flex
:
1 2 3 4 |
.center { display: flex; margin: auto; } |
Это будет работать только если родительский элемент также имеет display: flex
.
Если вы хотите разместить объект по центру горизонтально и вертикально, вы можете использовать свойства justify-content: center
и align-items: center
:
1 2 3 4 5 |
.center { display: flex; justify-content: center; align-items: center; } |
Вы также можете разместить объект по центру, используя свойства position: absolute
и top: 50%
, left: 50%
, transform: translate(-50%, -50%)
:
1 2 3 4 5 6 |
.center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } |
Этот метод также позволяет разместить объект по центру относительно родительского элемента.
Еще один способ разместить объект по центру горизонтально используя свойство text-align: center
:
1 2 3 |
.center { text-align: center; } |