首頁  >  文章  >  web前端  >  CSS中使用Flexbox來達到居中效果的方法實現

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

不言
不言原創
2018-06-21 15:24:302834瀏覽

這篇文章主要介紹了CSS中Flexbox來達到居中效果的實例,注意一下IE瀏覽器中的兼容問題,需要的朋友可以參考下

CSS未來發展的方向就是採用Flexbox這種設計,解決像垂直居中這種共同的問題。請注意,Flexbox有不只一種辦法居中,他也可以用來分欄,並解決奇怪的佈局問題。
2015715165959729.jpg (606×399)

.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上寫樣式,或需要額外容器
    需要各種廠商前綴相容於現代瀏覽器
    可能有潛在的效能問題

以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!

相關推薦:

如何使用CSS3製作彩色進度條樣式

關於CSS3定位和浮動的解析

以上是CSS中使用Flexbox來達到居中效果的方法實現的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn