html - why css use inline-block must be add pseudo element (let vertical-align:middle work) -

    .pseudo{          width:100%;          height:100px;          border:1px solid blue;          text-align:center;        }      .pseudo:before{          content:"";          display:inline-block;          vertical-align:middle;          height:100%;      }      .pseudo p{          display:inline-block;      }

<div class="pseudo">      <p>hello</p>  </div>

this html & css code. question why must use pseudo element vertical-align:middle can work . it's not work(vertical-align:middle) if write

.pseudo{     width:100%;     height:100px;     border:1px solid blue;     text-align:center;     display:inline-block;     vertical-align:middle; 

}

the vertical-align property applies element of text line (unless apply display:table-cell), keywords center, top, , bottom calculated height of text line (the called line box). height of line box calculated heights of inline elements make line (texts, images, inline blocks etc.), positions relative each other (affected vertical-align values).

without pseudo element, height of line box determined height of text itself, text fits whole line box, its vertical midpoint aligned line box vertical midpoint, applying vertical-align:middle changes nothing. inline block 100% container height makes line box (at least) tall inline block (which means line box becomes tall container). , aligning vertical midpoint of text vertical midpoint of tall line box makes text visually centered in container.