Как сделать вертикальное выравнивание текста в резиновом диве?

Question

[idclev31]

Подскажите, пожалуйста. Есть 4 div'a

<div class = "wrap">
    <div class = "container" id = "dv1">
     ТЕКСТ
    </div>
    <div class = "container" id = "dv2">
      ТЕКСТ
    </div>
    <div class = "container" id = "dv3">
      ТЕКСТ
    </div>
    <div class = "container" id = "dv4">
      ТЕКСТ
    </div>
  </div>

Их css

.container{
      height:25%;
      width:100%;
      font-size: 4vw;
      color:white;
      text-align:center;
    }

Никак не получается выровнять текст по вертикали так, чтобы он был по центру на мониторах любого формата.Сам сайт растягивается на 100 процентов по ширине и высоте.
Подскажите, пожалуйста, что можно сделать?

Answer 1

[Clever_Coyote]

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Comments

[idclev31]

Огромное спасибо!То, что нужно!

Answer 2

[Ксения Михайлова]

Используйте флексы, там это все просто и удобно.
Ну, или абсолютным позиционирование внутри контейнера при указанной высоте потомка.
Еще есть какой-то странный способ с псевдо-элементом в половину высоты, но ни разу не пригодился.

Answer 3

[Хороший Человек]

может так - Инфа
Если текста не одна строчка, то:

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

- инфа по align-items