Vertical-align's understanding

<div class= "Temp" >
<div class= "Juzhong" >fagagagagag</div>
<div class= "Demo" >xxxxxxxxxxx</div>
</div>
The CSS is as follows:
. juzhong{
background:red;
line-height:60px;
Display:inline-block;
}
. demo{
Background:green;
height:90px;
Display:inline-block;
Vertical-align:middle;
}
------------------
<div class= "Juzhong" >fagagagagag</div>
<div class= "Demo" >xxxxxxxxxxx</div>
<div class= "XX" ><div>ddafafjklj</div></div>
CSS-------
. juzhong{
background:red;
line-height:60px;
Display:inline-block;
}
. demo{
Background:green;
height:90px;
Display:inline-block;
Vertical-align:middle;

}
. xx{
Background:blue;
height:200px;
Vertical-align:middle;
Display:inline-block;
}

After experimentation, the conclusion is that the first Div must be set to Line-height, and the other settings display and vertical-align.

If you add a height:300 to the first Div, the effect is as follows

is still centered on the line height standard. The height of the box is not the baseline.

If you add a line-height to the second box, it changes the line number of the text element in the box, and the other remains unchanged.
Remove height, change the height of the box, and still center the alignment.
If Vertical-align is set to bottom, it is aligned at the bottom of the positive row height.

Vertical-align's understanding