這是為什麼呢！所以查找了許多資料，原來vertical-align屬性只對行內元素有效，對塊內元素無效！而此時就會用到display屬性，大家也看到我裡面有設定display屬性為inline-block屬性，確沒有效果，那是因為將物件呈遞為內聯物件，但是物件的內容作為塊物件呈遞。旁邊的內聯物件會被呈遞在同一行內！說的通俗點，就是你設定的當前div屬性還是塊物件呈遞，但是允許同一級別的div在同一行內，也可以設定寬度和高度！所以才會呈現如上圖二所示的沒有效果！

解決辦法：

可以在.header_3增加一個偽元素，
.header_3:after{
    content: "";
    display
 
: inline-block;
    height: 100%;
    vertical-align: middle;
  }

1.而如果我們將display屬性設定為table-cell，將塊元素轉化為單元格，然後加上vertical-align：middle，就可以了呈現圖三的效果了。（溫馨提示：但是你們別忘記加text—align屬性為center喲！）、

2.或者可以設定行高即line-height，但是要注意，要與div的高度一致！否則也會有偏差的（溫馨提示：而display：inline-block是這個）！