從一開始鐵人賽開賽以來，Amos寫了 25種這麼多的垂直置中技巧，但或許仍舊有人搞不懂這 25種垂直置中方式的使用時機，今天我們就來看看不同情境與需求下的垂直置中選擇方式。然後 Amos 就會直接被朋友當成顧問問說，我的網頁狀況是巴拉巴拉巴啦，然後我用了 Amos你講的25種垂直置中方式裡的第8種方式來寫，但是他無效ㄟ!我想說這不可能啊，在我電腦上都是好的阿會出現這狀況一定是你電腦有問題，最後問了一下才知道原來你的網頁要支援到IE8那個老古董阿，這樣的話你可以有8個方式可以用，然後朋友又會丟訊息回來說他寫了無效，Amos這時候就會給他一個白眼問他說你是不是還有什麼需求沒講到呢? 這時朋友才會說出他的第2種第3種需求出來，好吧!既然這樣，那我們今天就來看看幾個你可能會遇到的狀況以及他的垂直置中的解決方案吧。
對於我們的老敵人朋友IE來說，要做到垂直置中是個比較辛苦的，能使用的方式也較少，但其實說少也不太對，因為至少也還有 8 個垂直置中方式可利用，像是以下這幾個都可以支援到IE8含以上
看完上面的這幾個方式，是不是感到有點訝異!?沒想到小小一個垂直置中的需求有8種寫法可支援到IE8ㄟ!!!
「文字是動態的」這需求也是很常見的一種需求，我們的網頁內容一但是從資料庫中撈出來的，那文字的數量有可能會是不固定的，一但是不固定的內容，這樣我們的內容區塊就無法寫死高度了，所以!在這樣的需求下，我們的垂直置中可以使用以下 5 個垂直置中方式來達成。
哎呀!你好囉嗦阿! 要求那麼多! 這應該也是我們經常會遇到的需求了，這時候我們的篩選條件開始嚴苛了起來，沒關係! 上面 5 個方式中還是有 3 個可以達成這個條件。
看完上面這幾個需求應該就是我們最常被客戶要求的情況了，也是 Amos 最常被朋友問到的問題，每次被問到垂直置中的方式 Amos 都覺得這到底有什麼困難的有這麼多種方式可以達到垂直置中阿，挑一個去用就好了，其實沒有那麼恐怖的啦，看完之後是不是你也覺得沒那麼困難了呢?
Line搜尋「@csscoke」加入CSS可樂公開帳號，可以收到 Amos 第一手資訊喔
本文同步發表於 CSS可樂部落格
CSS coke的Youtube直播頻道
歡迎點擊右側訂閱 CSS coke直播頻道
若有任何問題歡迎留言討論喔
謝謝各位
iThome鐵人賽
看影片追技術