Как вертикально выровнять дочерний элемент по середине, когда родительский элемент вертикально выровнен по верху ⇐ CSS

[Anonymous]

Родительский элемент div имеет значение «vertical-align: top;» и для дочернего элемента div установлено значение «vertical-align: middle», но дочерний элемент все еще выравнивается по верху. Как мне выровнять дочерний элемент по середине относительно высоты родителя. Мне неизвестна конкретная высота элементов, поэтому я не могу перемещать их в зависимости от их высоты.

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

#parent {
vertical-align: top;
display: inline-block;
height: 1em;
width: 20px;
position: relative;
background-color: rgba(100,100,100,0.2);
}

#child {
vertical-align: middle;
display: inline-block;
height: 2em;
width: 5px;
background-color: blue;
}

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

Подробнее здесь: https://stackoverflow.com/questions/787 ... ned-to-top