css居中總結
前言
一直有個想法要把各種居中的方法總結一下,但還是一直沒有時間去整理。最近剛好在做樣式重構的專案,順便把一下自己有用過的或積累的居中方法給總結一下。
水平居中
- 行內元素水平居中
- 行內元素的居中比較簡單,直接使用text-align就可以達到居中效果
/* 行內元素 */ .parent4 { text-align: center; }
- 塊級元素水平居中(塊級水平居中方法列舉以下幾種)
-
margin auto
這是最常用到的塊級水平居中,利用margin:auto自動達到居中的效果,不過前提是子元素必須知道寬度
- 缺點: 必須提前知道元素的尺寸
/* 必須設定子元素寬度 */ .child1 { width: 100px; height: 100px; margin: 0 auto; background: aqua; }
-
利用inline-block實現水平居中
- 缺點: 必須有個父元素對其設定text-align
.parent2 { text-align: center; } /* 必須通過父元素 */ .child2 { display: inline-block; /*width: 100px; height: 100px;*/ background: aqua; }
-
利用css3新增的width屬性fit-content實現
很多情況下我們並不清楚一個元素的具體尺寸是多少,但是又要實現水平居中。這個時候我們想起float,自動撐開寬高,但是可惜的是float的脫離了文件流並不能用margin:auto去實現元素的水平居中。inline-block又必須有個父級對其進行設定居中。css3新增加了width裡的屬性實現了元素類似於float,inline-block的包裹效果,並且可以使用margin: auto進行居中。fit-content會根據你的內容去包裹你的元素。在此處不細說明,該興趣的小夥伴可以看看張鑫旭老師對這幾個新增的屬性的講解
/* width的其他屬性 */ .parent3 { width: fit-content; margin: 10px auto; background: aquamarine; }
垂直居中
- 行內元素垂直居中
- line-height實現當行文字垂直居中
/* 行內元素,當行文字垂直居中 */ .parent1 { height: 100px; line-height: 100px; background: wheat; }
- 塊級元素垂直居中(塊級元素居中的方法比較多,總結如下)
-
margin負邊距實現
該方法使用絕對定位利用margin負值將其居中,前提是需要 提前知道尺寸
- 優點:相容性不錯
- 缺點: 需要提前知道尺寸
.parent2 { position: relative; background: rosybrown; height: 100px; } .child2 { background: blue; position: absolute; width: 80px; height: 40px; left: 50%; top: 50%; margin-top: -20px; margin-left: -40px; }
-
如何在不知道尺寸的情況下垂直居中呢,CSS3——translate屬性的出現為我們提供了可能。該方法利用translate以自身的寬高為基準來達到居中效果,相當於margin負值的作用,不過我們不需要知道尺寸,translate幫我們解決了。transform中translate偏移的百分比值是相對於自身大小的,
- 優點: 不需要提前知道尺寸
- 缺點: 相容性不好(在移動端上基本支援)
/* 塊級元素: 絕對定位 + transform優點: 不需要提前知道尺寸 缺點: 相容性不好*/ .parent3 { position: relative; background: antiquewhite; height: 200px; } .child3 { background: salmon; position: absolute; width: 80px; height: 40px; left: 50%; top: 50%; transform: translate(-50%,-50%); }
-
塊級元素:絕對定位 + margin: auto;
結合以上兩種,在介紹一個利用絕對定位的一個很好用的方法
這是從張鑫旭老師的部落格搬運過來的詳情戳這裡 。
優點:不需要根據寬高去做相應的位移,自動幫你居中好了,相容性好
/* 塊級元素:絕對定位 + margin: auto; 優點:不需要根據寬高去做相應的位移,相容性好 */ .parent4 { position: relative; background: wheat; height: 200px; } .child4 { width: 80px; height: 40px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; background: blue; }
-
利用display: table-cell實現垂直居中
display的table和table-cell一般情況下用的不多,所以很少有人去關注它。這個實現的原理就是把其變成表格樣式,再利用表格的樣式來進行居中,在某些情況下還是很方便的。
/* 塊級元素:display: table-cell */ .parent5 { width: 600px; height: 200px; border: 1px solid red; display: table; } .child5 { display: table-cell; text-align: center; vertical-align: middle; } /* 水平垂直居中 */ .parent7 { width: 400px; height: 300px; display: table-cell; vertical-align: middle; border: 1px solid red; } .child7 { display: inline-block; vertical-align: middle; background: blue; }
-
利用calc()計算屬性
缺點: 相容性差,需要計算,消耗效能,需要提前知道尺寸
.parent8 { width: 300px; height: 300px; border: 1px solid red; position: relative; } .child8 { top:-webkit-calc(50%-50px); top:-moz-calc(50%-50px); top:calc(50%-50px); left:-webkit-calc(50%-50px); left:-moz-calc(50%-50px); left:calc(50%-50px); width: 100px; height: 100px; background: blue; }
- 利用偽元素實現居中(這個原理我還沒搞懂,但是實踐過真的ok)
.parent9 { width: 300px; height: 300px; border: 1px solid red; text-align: center; } .child9 { background: blue; width: 100px; height: 40px; display: inline-block; vertical-align: middle; } .parent9::before { content: ''; height: 100%; display: inline-block; vertical-align: middle; }
-
塊級元素:display: flex
缺點:在pc上相容性不好
.parent10 { width: 600px; height: 200px; border: 1px solid red; display: flex; align-items: center;/*垂直居中*/ justify-content: center;/*水平居中*/ } .child10 { background: blue; }
總結
以上是分別總結了水平居中和垂直居中常用的方法,要想實現水平垂直居中可以自己組合搭配一下。方法目前總結了這幾種,之後有新的方法也會持續更新,未完待續連載中....