網頁CSS的垂直居中需求始終沒有停過，而其困難度也始終沒有讓人輕松過，經過了每位開發先烈的研究后，據說CSS的垂直居中技巧已達到近十種之多，但始終鮮為人知，部分公司甚至將CSS的垂直居中技巧當成面試題，其重要性可見一斑，經過了Amos通靈了一下之后把垂直居中的寫法擴展到了23種，今天就讓Amos帶著大家輕松的了解一下CSS的垂直居中的方式吧。
1、Line-height
適用情景：單行文字垂直居中技巧
這個方式應該是最多人知道的了，常見于單行文字的應用，像是按鈕這一類對象，或者是下拉框、導航此類元素最常見到的方式了。此方式的原理是在于將單行文字的行高設定后，文字會位于行高的垂直中間位置，利用此原理就能輕松達成垂直居中的需求了。
| <div class="content">Lorem ipsam.</div>.content{ width: 400px; background: #ccc; line-height:100px; margin: auto;} |
2、Line-height + inline-block
適用情景：多對象的垂直居中技巧
既然可以使用第一種方式對行元素達成垂直居中的話，當然沒有理由不能做到多行啊~但是你需要將多個元素或多行元素當成一個行元素來看待，所以我們必須要將這些數據多包一層，并將其設定為inline-block，并在該inline-block對象的外層對象使用inline-block來代替height的設置，如此便可以達到垂直居中的目的了，從使你的數據是包含了標題跟內容在內也可以正常的垂直居中了。
| <div class="box box2"> <div class="content"> 立馬來看Amos實際完成的 <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/"> CSS3精美相冊效果 </a> 效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ </div></div>h2{ text-align: center;}.box{ width: 500px; border: 1px solid #f00; margin: auto; line-height: 200px; text-align: center;}.box2 .content{ display: inline-block; height: auto; line-height:1; width: 400px; background: #ccc;} |
3、:before + inline-block
適用情景：多對象的CSS垂直居中技巧
:before 偽類元素搭配 inline-block 屬性的寫法應該是很傳統的垂直居中的技巧了，此方式的好處在于子元素居中可以不需要特別設定高度，我們將利用:before偽類元素設定為100%高的inline-block，再搭配上將需要居中的子元素同樣設置成inline-block性質后，就能使用vertical-align:middle來達到垂直居中的目的了，此方式在以往其實是個非常棒的垂直居中解決方案，唯獨需要特別處理掉inline-block元素之間的4-5px空間這個小缺陷，但也很實用了。
| <h2>3.:before + inline-block</h2><div class="box box3"> <div class="content"> 立馬來看Amos實際完成的 <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/"> CSS3精美相冊效果 </a> 效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ </div></div>h2{ text-align: center;}.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; text-align: center;}.box::before{ content:''; display: inline-block; height: 100%; width: 0; vertical-align: middle;}.box .content{ width: 400px; background: #ccc; display: inline-block; vertical-align: middle;} |
