Как я могу центрировать текст по вертикали в div известной высоты, но без установки атрибута line-height, поскольку текст может занимать более одной строки?

Question

Как я могу вертикально центрировать неизвестное количество текста (может занимать несколько строк) в делении известной высоты.Я знаю, что это можно сделать с помощью свойства line-height, однако это работает только при наличии только одной строки текста.

Answer 1

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

.align-vertically {
    display: table-cell;
    vertical-align: middle; 
}

таким образом вы измените поведение отображения по умолчанию, чтобы div действовал как ячейка!

Answer 2

Я на самом деле нашел ответ на то, что мне нужно сам.

.info, .success, .warning, .error, .validation {  
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
}

.info {
color: #00529B;
background-color: #BDE5F8;
}

.success {
color: #4F8A10;
background-color: #DFF2BF;
}

.warning {
color: #9F6000;
background-color: #FEEFB3;
}

.error {
color: #D8000C;
background-color: #FFBABA;
}

Так сказать, трюк состоит в том, чтобы не устанавливать высоту для div, а просто устанавливать отступы / поля для центрирования.