最近，在學習CSS中，每次對一個頁面進行排版的時候，總是需要對文字居中，每次在div裡面設定text-align和vertical-algin兩個屬性就會以為他會居中！

廢話不多說了！直接上程式碼！

圖一：

圖二：

圖三：

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

解決辦法：

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

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