這篇文章分享CSS中使用Flexbox來達到居中效果的實例,注意一下IE瀏覽器中的兼容問題,需要的朋友可以參考下
CSS未來發展的方向就是採用Flexbox這種設計，解決像垂直居中這種共同的問題。請注意，Flexbox有不只一種辦法居中，他也可以用來分欄，並解決奇怪的佈局問題。 
.Center-Container.is-Flexbox {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}好處：
內容可為任意高寬，溢出也能表現良好
可用於各種進階佈局技巧
同時注意： 不支援IE8-9
需要在body上寫樣式，或需要額外容器
需要各種廠商前綴相容於現代瀏覽器
可能有潛在的效能問題
以上是分享CSS中使用Flexbox來達到居中效果的實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
