css vertical-align bottom не работает

Подскажите, пожалуйста, как выровнять блок по нижней границе родительского блока и как в самом блоке выровнять текст по нижней границе блока.
vertical-align: bottom и bottom: 0/1 эффекта не дают.

HTML:

1. <div class="main">
2.     <div class="child">
3.       Этот блок должен быть привязан к нижней границе, текст внутри него тоже.
4.   </div>
5. </div>

Код (CSS):

1. .main {
2.   height: 400px;
3.   background: green;
4.   vertical-align: bottom;
5.   bottom: 1;
6. }
7. .child {
8.   height: 150px;
9.   background: pink;
10.   vertical-align: bottom;
11.   bottom: 1;
12. }

https://codepen.io/LexerPHP/pen/ZEbjQVO

 

@Artur_hopf, @ADSoft - спасибо! Теперь по нижнему краю выравнивается.
Выходит, что position: absolute + bottom: 0 - это замена для vertical-align: bottom.
А какая замена для vertical-align: middle + text-align: center?
Чтобы блок child находился по середине и по вертикали, и по горизонтали. И чтобы текст внутри child тоже был по середине и по вертикали, и по горизонтали?

 

Я пробовал разобраться, но не получается добиться желаемого эффекта. Вот вроде всё просто - введи, например, vertical-align: middle и тогда всё содержимое будет равняться по середине по вертикали. Название свойства логичное, простое, понимаемое. Но оно не работает. Но оно для div я так понимаю не работают. А что же работает для div, когда стоит простая типичная задача выровнять содержимое блока по высоте по центру?
Аналогично как выровнить содержимое блока по центру, но уже по горизонтали? Вроде вот есть свойство justify-content: center - звучит логично и понятно. Но оно тоже не работает.
Т.о. всё, что я могу сейчас делать, это заниматься перебором различных свойств и этот перебор может не дать успеха, т.к. из 1000 вариантов я не смогу по времени добраться до варианта №1000, который даст желаемый результат.
Поэтому без помощи людей, которые уже знают как выполнить типичную операцию выравнивания по горизонтали и по вертикали, мне не обойтись(

 

Спасибо!! Я нашёл то, что мне нужно!
Изучая flex по вашей ссылке, нашёл ещё вот этот интересный материал, который также дал мне подсказку.
Ответ на мой вопрос как центрировать по вертикали и горизонтали такой:

Код (CSS):

1. .main {
2.   height: 400px;
3.   background: green;
4.   display: flex;
5.   justify-content: center;
6.   align-items: center;
7. }
8. .child {
9.   height: 150px;
10.   background: pink;
11.   display: flex;
12.   align-items: center;
13. }

Код (HTML5):

1. <div class="main">
2.     <div class="child">
3.       Этот блок должен быть в центре, текст внутри него тоже.
4.   </div>
5. </div>

Результат, полученный через flex - выравнивание элементов в блоке div по центру по высоте и по горизонтали https://codepen.io/LexerPHP/pen/yLYxYZx