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

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