The header is not closed, right?

The solution is as follows. Add a span in front of img

<p>
  <span></span>
  <img src="img/star.png" alt="">
</p>

Set attributes for span

span{
height:100%;
display:inline-block;
vertical-align:middle;
}
p{
border:1px solid #333;
width:500px;
height:400px;
text-align:center;
}
img{
vertical-align:middle;
}

vertical-align is calculated based on the baseline of the element baseline and the baseline of the parent element. It is relative to the row where the element itself is located. This attribute defines the baseline of the inline element relative to the element Vertical alignment of the baseline of row .

<p class="parent">
    <span class="child">
        123456
        <img class="middle" src="xxx" />
    </span>
</p>

<style>
    .middle {
        vertical-align: middle;
    }
</style>

At this time, you set .child as an inline block-level element, and then set the height to it. This height is not the row height of the row where the img itself is located, so in this case, you will not achieve what you want. Effective. Regardless of whether .child has a height set, the img of vertical-align is only relative to its own row.

The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box. -- MDN

Of courseinline-block that’s also possible.

Chestnut
plunker

vertical-align:middle centers the child elements and can only take effect when the table cell or element display attribute is set to table-cell. Here is a video tutorial to clear up your doubts. http://www.imooc.com/learn/542

To set display:table-cell in span