Using Flexbox to set vertical centre easily
當我們用CSS設置HTML頁面布局的時候，經常會遇到需要將若干Elements水平或者垂直對齊的情況。
對我來說，水平對齊還比較容易處理，但是垂直對齊，尤其是在浮動float布局上將同一行的不同高度的元素垂直居中排列，常常讓我頭疼不已。
如果你還沒有被這樣的痛苦折磨過，那么你很幸運，因為現在有了更簡單和有效的辦法，那就是Flexbox (Flex Layout)。
為了和之前的實現方式對比，我列出了三種方案，分別是Flexbox，inline-block，float。三種方式的難易程度和效果大家可以做一個比較。
Solution 1: Flexbox & align-items
使用Flexbox非常簡單，只需要將需要垂直對齊的Elements（如上圖中的div-A和div-B）放到一個容器container中（如上圖的藍色邊框），將container的display屬性設為“flex”，align-items設為“center”就可以了：
.container { display: flex; align-items: center; }
頁面效果如下圖所示，不同高度的圖片和文字完美的在container中垂直居中對齊了：
Flexbox對responsive webpage的支持也非常好，只要將“flex-wrap: wrap”加到container的樣式中，頁面縮小時Flexbox的元素會自動換行，不需額外設置breakpoint來控制：
完整HTML及CSS代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Flex Layout</title> <style type="text/css"> /* Solution 1: Flex box & align-items */ .container { display: flex; align-items: center; flex-wrap: wrap; } .item1, .item2 { margin: 0 auto; } /* Styles for both solutions */ .container { width: 80%; height: 250px; margin: 50px auto; border: 8px solid lightblue; } .item1 img { width: 300px; } /* Define the img width when the screen is less than 421px */ @media screen and (max-width: 420px) { .item1 img { width: 100%; } } /* Define the container width when the screen is bigger than 1000px */ @media screen and (min-width: 1000px) { .container { width: 784px; } } </style> </head> <body> <div class="container"> <div class="item1"><img src="img/cat.jpg" /></div> <h3 class="item2">Momo the CAT</h3> </div> </body> </html>
Solution 2: Inline-block & vertical-align
第二種方案，我們用inline-block來實現。
/* Solution 2: Inline-block & vertical-align */ .container { text-align: center; padding-top: 70px; } .item1, .item2 { display: inline-block; vertical-align: middle; } .item1 { width: 50%; } .item2 { width: 45%; }
將同行元素item1和item2的display屬性設為"inline-block"，再把vertical-align設為"middle"。
看到這里你也許會覺得這也不麻煩呀，為什么說Flexbox更好呢？如果僅僅設置了這兩個屬性，你會發現item1和item2僅僅是自己居中對齊了，他們並沒有在container中居於垂直居中的位置。
如下圖所示：
為了讓container中的元素垂直居中，不同於Solution1，我們需要做一些額外的設置，如container的padding-top，item1、item2的具體寬度（詳見Solution2 CSS代碼）。
當頁面在窄屏Device上顯示時，還需要設置更多的breakpoint取消inline-block、調整padding-top、寬度設置等等，否則頁面會出現各種問題。例如重疊、不再垂直居中等：
當你的頁面上有幾十、上百個相關元素需要調整時，這絕對不會是個愉快的過程。
Solution 3: Float
為了垂直居中而采取浮動布局是非常不推薦的做法。
我們都知道浮動框會引發整體布局的不穩定，如果每次用完浮動都加一些空白標簽去清除浮動的話又會給頁面帶來過多的冗余代碼。
退一步講，浮動只是能讓item1和item2同行顯示，為了讓其垂直居中對齊，只能通過調整margin、padding或者調整relative的位置。當頁面尺寸改變時，為了達到responsive的效果又需要更多的工作。
Float實現的CSS代碼如下，僅供比較參考，不推薦使用:
/* Solution 3: Float */ .container { padding: 50px 15px; height: 172px; } .item1 { float: left; } h3 { float: right; margin: 4em 3em 0 0; }