Как вертикально выровнять текст в div?

Чтобы разместить текст по центру в блоке, вам необходимо добавить свойство line-height, и это свойство должно соответствовать высоте вашего div. В вашем случае это будет выглядеть так:

.center {
  height: 309px;
  line-height: 309px; /* должно совпадать с высотой! */
}

<div class="center">
  Одна строка текста.
</div>

На самом деле, вы можете полностью удалить свойство height, и это сработает.

Имейте в виду, что этот метод работает только для одной строки текста, так что будьте осторожны.

Это легко сделать с помощью свойства display: flex. С помощью следующего метода текст в div будет выровнен по вертикали:

div {
  display: -webkit-flex; /* Для старых браузеров */
  display: flex;
  align-items: center; /* Выравнивание по вертикали */
  /* Дополнительные стили: */
  height: 300px;
  background-color: #888;
}

<div>
  Ваш текст здесь.
</div>

Если вы хотите выровнять текст по горизонтали, просто добавьте justify-content: center:

div {
  display: -webkit-flex; /* Для старых браузеров */
  display: flex;
  align-items: center; /* Выравнивание по вертикали */
  justify-content: center; /* Выравнивание по горизонтали */
  /* Дополнительные стили: */
  height: 300px;
  background-color: #888;
}

<div>
  Ваш текст здесь.
</div>

Обратите внимание, что вам нужно учитывать версию браузера, которую вы используете, так как в старых версиях этот код может не работать.

Для вертикального центрирования случайных элементов легко можно использовать следующий код:

HTML:

<div style="height: 200px">
    <div id="mytext">Этот текст выровнен по вертикали внутри div</div>
</div>

CSS:

#mytext {
    position: relative;
    top: 50%; 
    transform: translateY(-50%);
}

С помощью этого кода текст в вашем div будет точно выровнен по вертикали в центре внешнего div высотой 200px. Обратите внимание, что для поддержки некоторых браузеров может потребоваться использование префиксов (например, -webkit- для браузера WebKit).

Этот метод работает не только для текста, но и для других элементов.

На данный момент (учитывая, что нам больше не нужны Internet Explorer 6-8) я бы использовал CSS display: table для этой задачи (или display: flex).

Используя display: table:

.vcenter {
    display: table;
    background: #eee; /* необязательно */
    width: 150px;
    height: 150px;
    text-align: center; /* необязательно */
}

.vcenter > :first-child {
    display: table-cell;
    vertical-align: middle;
}

<div class="vcenter">
  <p>This is my Text</p>
</div>

Используя display: flex:

.vcenter {
    display: flex; 
    align-items: center; 
    height: 150px;
    justify-content: center; /* необязательно */
    background: #eee;  /* необязательно */
    width: 150px;
}

<div class="vcenter">
  <p>This is my text</p>
</div>

Для более старых браузеров:

Это (на самом деле, было) моё любимое решение для этой проблемы (простое и хорошо поддерживается браузерами):

div {
    margin: 5px;
    text-align: center;
    display: inline-block;
}

.vcenter {
    background: #eee;  /* необязательно */
    width: 150px;
    height: 150px;
}

.vcenter:before {
    content: " ";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    max-width: 0.001%; /* На случай, если текст будет переноситься, вы не должны это заметить */
}

.vcenter > :first-child {
    display: inline-block;
    vertical-align: middle;
    max-width: 99.999%;
}

<div class="vcenter">
  <p>This is my text</p>
</div>
<div class="vcenter">
  <h4>This is my Text<br/>Text<br/>Text</h4>
</div>
<div class="vcenter">
  <div>
   <p>This is my</p>
   <p>Text</p>
  </div>
</div>

Эти решения помогут вам центрировать текст как вертикально, так и горизонтально, в зависимости от используемого подхода.

Попробуйте добавить в родительский div следующий стиль:

display: flex;
align-items: center;

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