CSS to achieve vertical center, vertical-align:middle how to use

Vertical-align:middle Direct use is not valid

For example, the following code does not have a vertical center effect:

<div style= "width:100%;height:100px;" >
    
</div>

Vertical-align:middle is centered vertically within the row, to be used with Display:inline-block

<div style= "width:100%;height:100px;background:red" >
    <span style= "Vertical-align:middle;display: inline-block;height:100px "></span>
	
</div>

The center of the IMG is centered with the highest value of the inline element, and the above IMG tag is centered at the height of the span

This is how the logo of surging news is centered.