Не могу понять, как работает способ вертикального центрирования.
.parent {
height:100px;
width:600px;
border:1px solid #ff0000;
}
.helper {
display:inline-block;
height:100%;
width:1px;
background:green;
}
.child {
display:inline-block;
vertical-align:middle;
border:1px solid #0000ff;
}
<div class="parent">
<div class="helper"></div>
<div class="child">TEXT</div>
</div>
Если дать элементу .helper vertical-align:middle, то центрируется отлично. Без этого нет. Но ведь должно и без того?
Высота строки задана блоком .helper в 100% от родителя. Далее известно следующее - vertical-align:middle - выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента. Базовая линия - по низу .helper + половина высоты родительского элемента. Следуя этому элемент .child должен быть сейчас центрирован, однако на деле он просто сопоставил свою середину с базовой линией. Объясните пожалуйста, чего я не понимаю??