How to use Inline-block to implement elements that are centered up or down relative to the parent element

Usually when you do a responsive typesetting, the height of the element is not fixed, so you cannot write the height of the dead element to achieve the upper and lower center of the element. This is the time when the element is always centered in relation to the parent element by using the following method.

HTML structure:

<Divclass= "Parent">    <Divclass= "Child Child1"></Div>    <Divclass= "Child Child2"></Div>    <Divclass= "Child child3"></Div>    <Divclass= "Child Child4"></Div></Div>

CSS code:

. Parent{Height:100px;width:100%;}. Parent::after{ display: inline-block; content: "; font-size: 0; height: 100%;Vertical-align:middle;}. Child{ display: inline-block; vertical-align: Middle; max-height: 100%;}

How to use Inline-block to implement elements that are centered up or down relative to the parent element