Выравнивание модального окна bootstrap 3/4 вертикально по центру при помощи css

Сегодня мини урок о том как при помощи css выровнять модальное окно bootstrap 3 или 4 вертикально по центру.

Делается это очень просто для этого достаточно внести в файл css вот такую строку:

.modal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}

Данное решение подойдет в принципе для всех модальных окон — если они не превышают размеров окна.

Вариант 2

.modal {
  text-align: center;
}
.modal:before {
  display: inline-block;
  vertical-align: middle;
  content: " ";
  height: 100%;
}
.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}