前端秘籍,CSS垂直居中必學八式,一招一式盡顯功力
前言
設計網頁的時候,除了CSS水平居中的需求外,還會經常遇到CSS垂直居中的需求,CSS垂直居中跟CSS水平居中一樣都是前端設計師的基本功。
這篇教程將我以往用過的8種CSS實現垂直居中的方法總結出來,也方便日後再用到時回顧。
工具/原料
- CSS3
做為一名前端程序員,有一個學習的氛圍跟一個交流圈子(看我簽名),學習交流使我快樂
特別重要。
方法/步驟
1.通過verticle-align:middle實現CSS垂直居中。
通過vertical-align:middle實現CSS垂直居中是最常使用的方法,但是有一點需要格外注意,vertical生效的前提是元素的display:inline-block。
2.通過display:flex實現CSS垂直居中。
隨著越來越多瀏覽器兼容CSS中的flexbox特性,所以現在通過「display:flex」實現CSS水平居中的方案也越來越受青睞。
通過display:flex實現CSS垂直居中的方法是給父元素display:flex;而子元素align-self:center;
這個跟CSS水平居中的原理是一樣的,只是在flex-direction上有所差別,一個是row(默認值),另外一個是column。
3.通過偽元素:before實現CSS垂直居中。
具體方式是為父元素添加偽元素:before,使得子元素實現垂直居中。
4.通過display:table-cell實現CSS垂直居中。
給父元素display:table,子元素display:table-cell的方式實現CSS垂直居中。
5.通過隱藏節點實現CSS垂直居中。
創建一個隱藏節點#hide,使得隱藏節點的height值為剩餘高度的一半即可。
這種方法也適用於CSS水平居中,原理一樣。
6.已知父元素高度通過transform實現CSS垂直居中。
給子元素的position:relative,再通過translateY即可定位到垂直居中的位置。
7.未知父元素高度通過transform實現CSS垂直居中。
先給父元素position:relative,再給子元素position:absolute,通過translateY即可定位到垂直居中的位置。
?
8.通過line-height實現CSS垂直居中。
設置子元素的line-height值等於父元素的height,這種方法適用於子元素為單行文本的情況。
?
注意事項
前三種方法是瀏覽器兼容性最友好的,尤其是第1、3種,其它的或多或少會有些瀏覽器兼容性問題
推薦閱讀:
※web前端開發:html與css命名規範
※拉勾網首頁——隨滑鼠滑動方向進緩慢插入圖片是怎麼實現的?
※全局樣式加 float:left 導致 div{margin:0 auto;} 不起作用,為什麼?
※Chrome 的審查元素功能有哪些奇技淫巧?
※1920×1080解析度下14px的字型大小已經不再完美,為什麼至今很多網站沒有去做相應改變?