先說一下flex一系列屬性：
一、flex-direction: （元素排列方向）
※ flex-direction:row （橫向從左到右排列==左對齊）
※ flex-direction:row-reverse （與row 相反）
※ flex-direction:column （從上往下排列==頂對齊）
※ flex-direction:column-reverse （與column 相反）
二、flex-wrap: （內容一行容不下的時候才有效）
※ flex-wrap:nowrap （超出不換行，很奇怪裡面的寬度會變成100%）
※ flex-wrap:wrap （超出按父級的高度平分）
※ flex-wrap:wrap-reverse（與wrap 相反）
三、justify-content: （水平對齊方式）
※ flex-start （水平左對齊）
※ justify-content:flex-end; （水平右對齊）
※ justify-content:center; （水平居中對齊）
※ justify-content:space-between; （兩端對齊）
※ justify-content:space-around; （兩端間距對其）
四、align-items: （垂直對齊方式）
※ align-items:stretch; （預設）
※ align-items:flex-start; （上對齊，和預設差不多）
※ align-items:flex-end; （下對齊）
※ align-items:center;（居中對齊）
※ align-items:baseline; （基線對齊）
行內元素的水平居中
要實現行內元素=的水平居中，只需把行內元素包裹在塊級父層元素中，並且在父層元素css設定如下：
#container
並且適用於文字，鏈結，及其inline或者inline-block、inline-table和inline-flex.
要實現塊狀元素（display:block）的水平居中，我們只需要將它的左右外邊距margin-left和margin-right設定為auto，即可實現塊狀元素的居中，要水平居中的塊狀元素css設定如下：
#center要實現多個水平排列的塊狀元素的水平居中，傳統的方法是將要水平排列的塊狀元素設為display:inline-block，然後在父級元素上設定text-align:center，達到與上面的行內元素的水平居中一樣的效果。
#container
#center
在使用之前，首先介紹一下flexbox。
flexbox布局（flexible box)模組旨在提供乙個更加有效的方式制定、調整和分布乙個容器裡的專案布局，即使他們的大小是未知或者是動態的。是css3 中乙個新的布局模式，為了現代網路中更為複雜的網頁需求而設計。
flexbox 已經被瀏覽器快速支援。chrome 22+, opera 12.1+, 和 opera mobile 12.1+ ，firefox18+已經支援了本文中所描述的 flexbox。
lexbox由伸縮容器和伸縮專案組成。通過設定元素的display屬性為flex或者inline-flex可以得到乙個伸縮容器。設定為flex的容器被渲染為乙個塊級元素，而設定為inline-flex的容器則渲染為乙個行內元素。而每乙個被設定為flex的容器，它的內部元素都將變成乙個flex專案，即是乙個伸縮專案。簡單的說，flex 定義了伸縮容器內伸縮專案該如何布局。
回到正題，利用flexbox實現多塊狀元素的水平居中，只需要將父級容器的css設定如下：
1 #container法一.絕對定位與負邊距實現。
利用絕對定位，將元素的top和left屬性都設為50%，再利用margin邊距，將元素回拉它本身高寬的一半，實現垂直居中。核心css**如下：
#container
#center
絕對定位與margin。
這種方法也是利用絕對定位與margin，但是無需知道被垂直居中元素的高和寬。核心**如下：
#container
#center
法一. 當要被居中的元素是inline或者inline-block元素
當要被居中的元素是inline或者inline-block的時候，可以巧妙的將父級容器設定為display:table-cell，配合text-align:center和vertical-align:middle即可以實現水平垂直居中。
#container
#center
利用css3的transform，可以輕鬆的在未知元素的高寬的情況下實現元素的垂直居中。
#container
#center
#container
#center
CSS實現元素水平居中 垂直居中 水平垂直居中
1.元素水平居中 1.1行內元素水平居中 1.2塊級元素水平居中 1.2.1定寬塊級元素的水平居中 1.2.2不定寬塊級元素水平居中 2.元素垂直居中 2.1 單行文字垂直居中 2.2 多行文字垂直居中 2.3塊級元素垂直居中 3.元素水平垂直居中 像文字text 影象img 按鈕等行內元素要實現水...
元素水平垂直居中
lang en charset utf 8 垂直居中示例title name viewport content width device width,initial scale 1 rel stylesheet href 可行，支援ie8 block1 block1 before center1 不...
元素水平垂直居中
給子元素設定以下內容 給父元素新增屬性 display flex align items center justify content center 先給元素設定絕對定位，再依次新增以下屬性，具體 如下所示。position absolute top 0 left 0 right 0 bottom ...