Line height equals height why not center

Be careful ：height It must be the height of the content box , That is to say box-sizing:content-box Under the circumstances , if border-box when , At this time height Is the height of the whole box , Need to subtract padding,border、margin Is the size of the real content box height.
Like a box box-sizing:border-box,border：10px,height:40px, The height of the content box should be 20px,line-height Set to 20px You can achieve the upper and lower center .

notes ：box-sizing The default value of the property is ：content-box , But in the actual development, we often May be written as ：box-sizing: content-box.

So let's write one box-sizing：border-box Example ：

  <style>
        div{
    
            width: 200px;
            height: 00px;
            border: 20px solid red;
            background-color: red;
            height: 100px;
            line-height: 100px;
            box-sizing: border-box;
        }
    </style>
       <div> study hard </div>

It is obvious that the text is not centered vertically

When we change to box-sizing: content-box when ;