最近又遇到許多垂直居中的問題，這是Css布局當中十分常見的一個問題，諸如定長定寬或不定長寬的各類容器的垂直居中，其實都有很多種解決方案。而且在Css3的flexbox出現之后，解決各類居中問題變得更加容易了。搜了搜園子內關于flexbox的文章覺得很多不夠詳盡，故想借介紹flexbox的同時好好總結一番各類垂直居中的方法。

由簡至繁：

行內元素的水平居中

要實現行內元素（<span>、<a等）的水平居中，只需把行內元素包裹在塊級父層元素（<div>、<li>、<p>等）中，并且在父層元素CSS設置如下：

并且適用于文字，鏈接，及其inline或者inline-block、inline-table和inline-flex。

塊狀元素的水平居中

要實現塊狀元素（display:block）的水平居中，我們只需要將它的左右外邊距margin-left和margin-right設置為auto，即可實現塊狀元素的居中，要水平居中的塊狀元素CSS設置如下：

多個塊狀元素的水平居中

要實現多個水平排列的塊狀元素的水平居中，傳統的方法是將要水平排列的塊狀元素設為display:inline-block，然后在父級元素上設置text-align:center，達到與上面的行內元素的水平居中一樣的效果。

使用flexbox實現多個塊狀元素的水平居中

在使用之前，首先介紹一下flexbox。

Flexbox布局（Flexible Box)模塊旨在提供一個更加有效的方式制定、調整和分布一個容器里的項目布局，即使他們的大小是未知或者是動態的。是CSS3 中一個新的布局模式，為了現代網絡中更為復雜的網頁需求而設計。

Flexbox 已經被瀏覽器快速支持。Chrome 22+, Opera 12.1+, 和 Opera Mobile 12.1+ ，firefox18+已經支持了本文中所描述的 Flexbox。

學會使用flexbox

要為元素設置flexbox布局，只需將display屬性值設置為flex。

flexbox的默認為一個塊級元素，如果需要定義為一個行內級的元素，同理：

flexbox由伸縮容器和伸縮項目組成。通過設置元素的display屬性為flex或者inline-flex可以得到一個伸縮容器。設置為flex的容器被渲染為一個塊級元素，而設置為inline-flex的容器則渲染為一個行內元素。而每一個被設置為flex的容器，它的內部元素都將變成一個flex項目，即是一個伸縮項目。簡單的說，flex 定義了伸縮容器內伸縮項目該如何布局。