CSS中使用Flexbox來達到置中效果的方法實現

這篇文章主要介紹了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上寫樣式，或者需要額外容器
需要各種廠商首碼相容現代瀏覽器
可能有潛在的效能問題

以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！