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

Если вы хотите разместить элемент, например, блок текста, по центру страницы или родительского элемента, вы можете использовать различные подходы в CSS.

1. По вертикали и горизонтали с помощью свойства display: flex

Вы можете использовать свойство display: flex для создания контейнера-флекса и выравнивания его дочерних элементов как по вертикали, так и по горизонтали.

HTML:

<div class="container">
  <div class="item">Элемент внутри контейнера</div>
</div>

CSS:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.item {
  text-align: center;
}

В данном примере мы создаем контейнер-флекс с помощью свойства display и значение flex. Затем мы используем свойства justify-content и align-items для установки выравнивания элементов как по горизонтали, так и по вертикали. Значение center располагает элементы по центру контейнера.

Мы также устанавливаем высоту контейнера с помощью свойства height равное 100vh, чтобы контейнер занимал всю высоту видимой области страницы.

2. По горизонтали с помощью свойства text-align

Вы можете использовать свойство text-align со значением center для выравнивания элементов по горизонтали, если элемент имеет блочную форму.

HTML:

<div class="container">
  <p>Текст для центрирования</p>
</div>

CSS:

.container {
  text-align: center;
}

В данном примере мы используем свойство text-align для задания горизонтального выравнивания элементов. Значение center центрирует содержимое элементов по горизонтали внутри контейнера.

3. По вертикали с помощью свойства position и transform

Вы можете использовать свойства position и transform для выравнивания элементов по вертикали.

HTML:

<div class="container">
  <div class="item">Элемент внутри контейнера</div>
</div>

CSS:

.container {
  position: relative;
  height: 100vh;
}

.item {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
}

В данном примере мы устанавливаем высоту контейнера с помощью свойства height равное 100vh, чтобы контейнер занимал всю высоту видимой области страницы.

Затем мы устанавливаем свойство position на relative для родительского элемента и position на absolute для дочернего элемента, чтобы элемент был позиционирован относительно родительского элемента.

Для выравнивания по вертикали мы устанавливаем свойство top на 50%, чтобы элемент был расположен в середине родительского элемента, а затем использовать transform с помощью свойства translateY со значением -50%, чтобы переместить элемент на половину его высоты вверх.