Как центрировать текст (горизонтально и vertically) внутри блока div?

Вам нужно применить CSS-класс к целевому <div>, чтобы получить центрированный текст как по горизонтали, так и по вертикали. Вот пример кода, который вы можете использовать:

CSS:

.centered {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: red; /* Не обязательно, просто чтобы лучше видеть результат */
}

HTML:

<div class="centered">Этот текст центрирован по горизонтали и вертикали</div>

При использовании этого класса, <div> будет иметь фиксированную ширину и высоту 150 пикселей, а текст внутри него будет отцентрирован благодаря свойствам display: flex, align-items: center и justify-content: center. Не забудьте добавить стиль background, если хотите лучше визуализировать результат.

Вы можете попробовать очень простой код для этого:

.box {
  height: 90px;
  width: 90px;
  background: green;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="box">
  Lorem
</div>

Этот код создаст квадратный элемент высотой и шириной 90 пикселей с зеленым фоном, внутри которого текст "Lorem" будет выровнен по центру как по вертикали, так и по горизонтали благодаря свойствам display: flex, align-items: center и justify-content: center.

Ссылка на CodePen: http://codepen.io/santoshkhalse/pen/xRmZwr

Я всегда использую следующий CSS для контейнера, чтобы центрировать его содержимое как по горизонтали, так и по вертикали:

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;

Посмотрите на это в действии здесь: https://jsfiddle.net/yp1gusn7/

Такой подход поможет вам правильно центрировать элементы в контейнере, используя Flexbox. Однако стоит отметить, что префиксы для старых браузеров могут не понадобиться, если вы нацелены на современные версии. Просто добавьте display: flex;, align-items: center; и justify-content: center;.

Чтобы отцентрировать элементы внутри родительского контейнера с использованием CSS Grid в стиле "2020 Way", вы можете применить следующий код:

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

Здесь свойство display: grid; устанавливает родительский элемент как контейнер сетки. Свойство place-items: center; позволяет удобно центрировать дочерние элементы как по горизонтали, так и по вертикали. Это простой и эффективный способ добиться желаемого результата с помощью CSS Grid.

Если у вас есть дополнительные вопросы или требуется более подробное объяснение, не стесняйтесь спрашивать!

Вы можете использовать свойство flex на родительском div и добавить свойство margin: auto к дочерним элементам:

.parent {
    display: flex;
    /* Вы можете изменить это на `row`, если хотите, чтобы элементы располагались рядом, а не друг под другом */
    flex-direction: column;
}

/* Замените тег `p` на те теги, которые используются для ваших дочерних элементов */
.parent p {
    margin: auto;
}

Вы можете посмотреть больше вариантов использования flex здесь: https://css-tricks.com/snippets/css/a-guide-to-flexbox/