Как поставить по центру в css

Чтобы поставить объект по центру с помощью CSS, есть несколько способов:

Свойство «margin: auto» для блочного элемента: задайте блочному элементу ширину и установите свойство «margin» равное «auto». Например:

div {
  width: 50%;
  margin: auto;
}

Свойство «text-align: center» для родительского элемента: если вы хотите выровнять текст или инлайн-элемент по центру своего родительского элемента, задайте свойство «text-align» для родительского элемента. Например:

div {
  text-align: center;
}

span {
  display: inline-block; /* делаем инлайновый элемент блочным */
}

Свойство «position: absolute» и «left: 50%» для блочного элемента: задайте блочному элементу свойство «position: absolute» и «left: 50%», затем с помощью свойства «transform: translateX(-50%);» переместите его обратно на половину его ширины. Например:

div {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

Свойство «display: flex» и «justify-content: center» для родительского элемента: задайте родительскому элементу свойство «display: flex» и «justify-content: center», чтобы выровнять дочерние элементы по центру по горизонтали. Например:

.parent {
  display: flex;
  justify-content: center;
}

.child {
  flex-shrink: 0;
}

Это выровняет все элементы с классом «child» по центру родительского элемента с классом «parent» по горизонтали.

Свойство «display: grid» и «place-items: center» для родительского элемента: задайте родительскому элементу свойства «display: grid» и «place-items: center», чтобы выровнять дочерние элементы по центру по горизонтали и вертикали. Например:

.parent {
  display: grid;
  place-items: center;
}

.child {
  flex-shrink: 0;
}

Это выровняет все элементы с классом «child» по центру родительского элемента с классом «parent» по горизонтали и вертикали.

Поделиться в: