Как вертикально центрировать текст с помощью CSS?

Вы можете легко сделать это, добавив следующий кусок CSS:

display: table-cell;
vertical-align: middle;

Это значит, что ваш CSS в итоге будет выглядеть так:

#box {
  height: 90px;
  width: 270px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  margin-top: 20px;
  margin-left: 5px;
  display: table-cell;
  vertical-align: middle;
}

И HTML-код будет следующим:

<div id="box">
  Некоторый текст
</div>

Существует небольшая магия с использованием flexbox в CSS3:

/* Важно */
section {
    display: flex;
    display: -webkit-flex;
}
section p {
    /* Ключевая часть */
    margin: auto;
}

/* Не важно, цвета и интерфейс */
section {
    height: 200px;
    width: 60%;
    margin: auto;
    border-radius: 20px;
    border: 3px solid orange;
    background-color: gold;
}
section p {
    text-align: center;
    font-family: Cantarell, Calibri;
    font-size: 15px;
    background-color: yellow;
    border-radius: 20px;
    padding: 15px;
}

<section>
    <p>
        Я центрированный блок!<br/>
        Flexbox — это здорово!
    </p>
</section>

Совет: Замените строку, отмеченную как "Ключевая часть", на одну из следующих строк, если хотите центрировать текст:

1. Только по вертикали:

   margin: auto 0;
   

2. Только по горизонтали:

   margin: 0 auto;
   

Как я заметил, этот трюк также работает с сетками (т.е. display: grid).

Ваш вопрос относится к тому, как сделать подход к верстке более гибким с использованием CSS. Приведённый вами код задает фиксированную ширину для контейнера div, а содержимое в span может располагаться в разных строках.

Вот несколько рекомендаций для создания более гибкого подхода к вёрстке:

1. Удалите фиксированную ширину: Вместо назначения фиксированной ширины для div, используйте max-width, чтобы контейнер мог адаптироваться к содержимому и размеру экрана.

   div {
     max-width: 100%; /* Теперь контейнер будет занимать всю доступную ширину */
     min-height: 50px;
     line-height: 50px;
     text-align: center;
     border: 1px solid #123456;
     margin-bottom: 5px;
   }
   

2. Используйте flexbox или grid для более сложных макетов: Если требуется более продвинутая верстка, рассмотрите возможность использования Flexbox или CSS Grid. Например, Flexbox позволяет вам упрощать горизонтальное и вертикальное выравнивание элементов.

3. Измените настраиваемое значение line-height: Если line-height должен варьироваться в зависимости от контента, рассмотрите возможность использования значения, основанного на шрифте или других параметрах, а не фиксированного значения.

Пример с использованием Flexbox:

.container {
  display: flex;
  flex-direction: column; /* Выстраиваем элементы по вертикали */
}

div {
  flex: 0 1 auto; /* Элементы будут адаптироваться по высоте */
  /* Остальные стили остаются прежними */
}

Таким образом, ваше содержимое станет более адаптивным к изменениям в размере экрана и тексту. Применяя эти техники, вы сможете создать более гибкий и отзывчивый интерфейс.

Я видел предыдущие ответы, и они будут работать только для фиксированной ширины экрана (не отзывчиво). Для создания отзывчивого дизайна нужно использовать flex.

Пример:

div {
  display: flex;
  align-items: center;
}

Вы также можете использовать следующие свойства:

display: flex; 
align-content: center; 
justify-content: center;

Эти свойства помогут вам выровнять элементы по центру как по вертикали, так и по горизонтали внутри контейнера с использованием flexbox.