CSS 垂直置中的三個方法

我們在編輯一個版面，通常都會用到水平置中和垂直置中來設計，而水平置中很好處理，不外乎就是設定 margin:0 auto;或是 text-align:center;,就可以輕鬆解決掉水平置中的問題，但一直以來最麻煩對齊問題，都是「垂直置中」這個討人厭的設定，以下將介紹三種單純利用 CSS 垂直置中的方式：「設定行高」、「添加偽元素」、「calc 動態計算」，其實一點也不難 ( 當然跟水平置中比起來難了一點 )，只需要觀念正確就可以解決。

設定行高 ( line-height )

設定行高是垂直置中最簡單的方式，適用於「單行」的「行內元素」 ( inline、inline-block )，例如單行的標題，或是已經設為 inline-block 屬性的 div，若將 line-height 設成和高度一樣的數值，則內容的行內元素就會被垂直置中， 因為是行高，所以會在行內元素的上下都加上行高的 1/2 ，所以就垂直置中了！不過由此就可以看出，為什麼必須要單行的行內元素，因為如果多行，第二行與第一行的間距會變超大，就不是我們所期望的效果了。 CSS 範例：外層 div0，內容 redbox，讓 redbox 水平垂直置中。