自丟網

 找回密碼
 立即注冊
搜索
查看: 153|回復: 1
打印 上一主題 下一主題

常用幾種css居中樣式

[復制鏈接]

站長QQ:515138

UID
1
丟幣
54
主題
808
帖子
868
在線時間
416 小時
最后登錄
2019-9-23
跳轉到指定樓層
樓主
發表于 2019-7-1 20:44:10 | 查看: 153|回復: 1 | 只看該作者 回帖獎勵 |倒序瀏覽 |閱讀模式
CSS水平居中text-align:center前端技術經常遇見和使用的,下面自丟網給大家介紹幾種常見css居中的方式:
1,通過margin: 0 auto; text-align: center實現CSS水平居中。
這種方法是實現CSS水平居中最最常用的,我在前端開發中大概有60%的CSS水平居中就是通過“margin: 0 auto; text-align: center”實現的。
2,通過display:flex實現CSS水平居中。
隨著越來越多兼容flexbox,所以通過“display:flex”實現CSS水平居中的方案也越來越受青睞。
通過display:flex實現CSS水平居中的原理是父元素display:flex;flex-direction:column;而子元素align-self:center;
這個跟CSS垂直居中的原理是一樣的,只是在flex-direction上有所差別,一個是row(默認值),另外一個是column。
3,通過display:table-cell和margin-left實現CSS水平居中。
對于父元素和子元素的寬度都確定的情況,適合通過display:table-cell和margin-left實現CSS水平居中。
使用時,父元素display:table-cell,子元素給剩余寬度一半的margin-left。
4,通過position:absolute實現CSS水平居中。
這種方法跟上一個方法適用場景一樣,也是適用于父元素和子元素的寬度都確定的情況。
使用時,父元素position:absolute,子元素給剩余寬度一半的margin-left。
5,通過width:fit-content實現CSS水平居中。
這種方法可以確保子元素寬度不確定的情況下,也能實現CSS水平居中。
需要注意的是,需要配合“margin: 0 auto; text-align: center”使用。
6,通過display:inline-block和text-align:center實現CSS水平居中。
display:inline-block能改父元素內的子元素的表達樣式,同樣需要配合“margin: 0 auto; text-align: center”使用。
7,通過position:relative、float:left和margin-left實現CSS水平居中。
給父元素樣式position:relative,給子元素float:left和margin-left就可以實現CSS水平居中。
8,通過隱藏節點+float的方法實現CSS水平居中。
我們可以通過增加一個隱藏節點,然后使其float:left,這樣子元素就會被隱藏節點推著水平居中。
這種增加隱藏節點方法也適用于CSS垂直居中,原理一樣,但是不用float。
9,通過transform實現CSS水平居中。
這種方法是最不推薦的方法,因為transform屬性在各個瀏覽器中的表現行為不一致,所以會出現一些兼容性的問題,只有當已知用戶瀏覽器時才推薦使用。


推薦給好友: [復制鏈接]
上一篇:織夢dedecms 列表頁添加自定義字段并且調用的方法教程摘要:織夢dedecms 列表頁添加自定義字段并且調用的方法教程 ...
下一篇:織夢DedeCMS華麗藍色后臺管理界面模板GBK編碼摘要:織夢DedeCMS華麗藍色后臺管理界面模板GBK編碼 織夢后 ...
樓主熱帖
回復

使用道具 舉報

UID
10
丟幣
1
主題
37
帖子
358
在線時間
5 小時
最后登錄
2019-7-4
沙發
發表于 2019-8-20 05:13:25 | 只看該作者
技術學習教程網,支持一下。
回復

使用道具 舉報

網站地圖|百度統計|免責聲明|Archiver|手機版|小黑屋|ZiDiu.Com ( 粵ICP備17166275號 )

GMT+8, 2019-9-23 17:46 , Processed in 0.171875 second(s), 35 queries .

Powered by Discuz!

© Comsenz Inc.

快速回復 返回頂部 返回列表
鸟叔彩金