Как разместить объект по центру в css?

Пользователь

от ottilie.farrell , в категории: HTML/CSS , год назад

Как разместить объект по центру в css?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от gussie.jones , 5 месяцев назад

@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;
}