Как вертикально центрировать элемент div для всех браузеров с помощью CSS?

Самый простой способ сделать это — использовать три строки CSS:

1) position: relative;

2) top: 50%;

3) transform: translateY(-50%);

Вот пример:

div.outer-div {
  height: 170px;
  width: 300px;
  background-color: lightgray;
}

div.middle-div {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

<div class='outer-div'>
  <div class='middle-div'>
    Тестовый текст
  </div>
</div>

Таким образом, вы сможете вертикально центрировать содержимое внутри блока.

Чтобы центрировать содержимое вертикально с помощью CSS, вы можете использовать Flexbox. Вот пример, который вы привели:

html, body {
    height: 100%;
    margin: 0; /* Убираем отступы у body */
}

body {
  display: flex; /* Устанавливаем flex-контейнер */
  align-items: center; /* Центрируем элементы по вертикали */
}

<div>This is centered vertically</div>

В этом коде мы устанавливаем height для элементов html и body равным 100%, чтобы занять всю высоту окна браузера, и убираем отступы. Затем, задав display: flex для body, мы можем использовать свойство align-items: center для вертикального центрирования всех дочерних элементов внутри body. Таким образом, содержимое внутри <div> будет отображаться по центру вертикали.

Самое простое решение представлено ниже:

.outer-div {
  width: 100%;
  height: 200px;
  display: flex;
  border: 1px solid #000;
}

.inner-div {
  margin: auto;
  text-align: center;
  border: 1px solid red;
}

<div class="outer-div">
  <div class="inner-div">
    Привет!
  </div>
</div>

В этом примере внешний блок .outer-div использует Flexbox для центрирования внутреннего блока .inner-div как по вертикали, так и по горизонтали. Вы также можете изменить текст внутри внутреннего блока по своему усмотрению.

Существует несколько способов достижения этой цели.

Используя свойство flex в CSS.

Решение #1

.parent {
    width: 400px;
    height: 200px;
    background: blue;
    display: flex;
    align-items: center;
    justify-content: center;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
}

<div class="parent">
    <div class="child"></div>
</div>

или используя display: flex; и margin: auto;

Решение #2

.parent {
    width: 400px;
    height: 200px;
    background: blue;
    display: flex;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
    margin: auto;
}

<div class="parent">
    <div class="child"></div>
</div>

Для центровки текста

Решение #3

.parent {
    width: 400px;
    height: 200px;
    background: yellow;
    display: flex;
    align-items: center;
    justify-content: center;
}

<div class="parent">Центр</div>

Используя процентные (%) высоту и ширину.

Решение #4

.parent {
    position: absolute;
    height: 100%;
    width: 100%;
    background: blue;
    display: flex;
    align-items: center;
    justify-content: center;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
}

<div class="parent">
    <div class="child"></div>
</div>

Это можно сделать двумя способами.

Способ 1: Используя CSS-трансформации

body {
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    height: 100%; 
    width: 100%; 
}

Способ 2: Используя Flexbox

body {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

Здесь align-items: center; позволяет вертикально центрировать содержимое, а justify-content: center; — горизонтально центрировать содержимое. Выберите способ, который лучше подходит для вашего проекта!