Центральное выравнивание элементов CSS без флексбокса ⇐ CSS

[Anonymous]

У меня возникла проблема с отображением текста в центре экрана (по высоте) на веб-странице. HTML-код сайта:

Код: Выделить всё

example







text that should be in the middle

Я хочу, чтобы элемент home-container растягивался до самого низа страницы, а текст должен быть посередине

код> посередине. Мой CSS выглядит так:

Код: Выделить всё

html, body{
height:100%;
}

.home-container{
width: 100%;
height: 100%;
background-color: rgba(139,0,0,0.4);
}

.home-row{
vertical-align: middle;
}

Я понимаю, что то, что я хочу сделать, возможно, если вместо этого я создам домашний контейнер вот так:

Код: Выделить всё

.home-container{
width: 100%;
height: 100%;
background-color: rgba(139,0,0,0.4);
align-items: center;
display: flex;
}

но это работает не во всех браузерах. Что я делаю не так со свойством вертикального выравнивания? В моем примере Id на самом деле ничего не делает...

Подробнее здесь: https://stackoverflow.com/questions/383 ... ut-flexbox