vertical align inline-block

[Saumya]

I can't figure out how vertical centering works.

https://jsfiddle.net/mws18yoL/

.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>

If you give an element .helper vertical-align:middle, it's very central. Not without that. But it has to be already?

The height of the line is fixed by a block .helper 100% of the parent. It is further known that vertical-align:middle is the equalization of the middle point of the parent element plus half the height of the parent element. The reference line is at the bottom of .helper + half the height of the parent element. In keeping with this element, the child should be centralized now, but in fact he just compared his middle to the base line. Please explain what I don't understand?

[gionna]

Because the units display:inline-block; try to build behind each other's records, they need to be vertical-align vertically, otherwise after the vertical-align block, the tracking block becomes kind of bottom... somehow. P.S. and better use inline-block construction not to leave a gap between the blocks (string gap/transport, etc.) otherwise there will be a retreat that you will not understand where it came from either.

.parent {
    height:100px;
    width:600px;  
    border:1px solid #ff0000;    
}
.helper {

display:inline-block;

height:100%;

width:1px;

background-color:green;

vertical-align:middle;

}
.child {

display:inline-block;

vertical-align:middle;

border:1px solid #0000ff;

}

<div class="parent">

<div class="helper">

</div><div class="child">TEXT</div>

</div>