整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          CSS的23個垂直居中技巧,你都學會了嗎?

          CSS的23個垂直居中技巧,你都學會了嗎?

          頁CSS的垂直居中需求始終沒有停過,而其困難度也始終沒有讓人輕松過,經過了每位開發先烈的研究后,據說CSS的垂直居中技巧已達到近十種之多,但始終鮮為人知,部分公司甚至將CSS的垂直居中技巧當成面試題,其重要性可見一斑。

          在不斷探索,發現中,CSS的垂直居中的方式竟然能達到23種,大家可以看看自己熟知的是哪幾種?

          1、Line-height

          適用情景:單行文字垂直居中技巧

          這個方式應該是最多人知道的了,常見于單行文字的應用,像是按鈕這一類對象,或者是下拉框、導航此類元素最常見到的方式了。此方式的原理是在于將單行文字的行高設定后,文字會位于行高的垂直中間位置,利用此原理就能輕松達成垂直居中的需求了。

          <div class="content">web前端開發</div>
          .content{ width: 400px; background: #ccc; line-height:100px; margin: auto;
          }
          

          2、Line-height + inline-block

          適用情景:多對象的垂直居中技巧

          既然可以使用第一種方式對行元素達成垂直居中的話,當然沒有理由不能做到多行啊~但是你需要將多個元素或多行元素當成一個行元素來看待,所以我們必須要將這些數據多包一層,并將其設定為inline-block,并在該inline-block對象的外層對象使用inline-block來代替height的設置,如此便可以達到垂直居中的目的了,從使你的數據是包含了標題跟內容在內也可以正常的垂直居中了。

          <h2>line-height + inline-block</h2><div class="box box2">
           <div class="content"><a href="#">web前端開發</a></div></div>
          .box{ width: 500px; border: 1px solid #f00; margin: auto; line-height: 200px; text-align: center;
          }.box2 .content{ display: inline-block; height: auto; line-height:1; width: 400px; background: #ccc;
          }
          

          3、:before + inline-block

          適用情景:多對象的CSS垂直居中技巧

          :before 偽類元素搭配 inline-block 屬性的寫法應該是很傳統的垂直居中的技巧了,此方式的好處在于子元素居中可以不需要特別設定高度,我們將利用:before偽類元素設定為100%高的inline-block,再搭配上將需要居中的子元素同樣設置成inline-block性質后,就能使用vertical-align:middle來達到垂直居中的目的了,此方式在以往其實是個非常棒的垂直居中解決方案,唯獨需要特別處理掉inline-block元素之間的4-5px空間這個小缺陷,但也很實用了。

          <h2>3.:before + inline-block</h2><div class="box box3">
           <div class="content"></div></div>
          h2{ text-align: center;
          }.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; text-align: center;
          }.box::before{ content:''; display: inline-block; height: 100%; width: 0; vertical-align: middle;
          }.box .content{ width: 400px; background: #ccc; display: inline-block; vertical-align: middle;
          }
          

          4、absolute + margin 負值

          適用情景:多行文字的垂直居中技巧

          誰說絕對定位要少用?Amos認為沒有少用多用的問題,重點在于你是否有妥善運用才是重點,絕對定位在這個例子中會設置top:50%來抓取空間高度的50%,接著在將居中元素的margin-top設定為負一半的高度,這樣就能讓元素居中了,此方法可是自古以來流傳多年的居中方式呢?

          <h2>4.absolute + margin 負值</h2><div class="box box4">
           <div class="content">web前端開發</div></div>
          h2{ text-align: center;
          }.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; position: relative;
          }.box4 .content{ width: 400px; background: #ccc; height: 70px; position: absolute; top:50%; left: 50%; margin-left: -200px; margin-top: -35px;
          }
          

          5、absolute + margin auto

          適用情景:多行文字的垂直居中技巧

          又一個絕對定位的垂直居中的方案,這個方式比較特別一點,當元素設置為絕對定位后,假設它是抓不到整體可運用的空間范圍,所以margin:auto會失效,但當你設置了top:0;bottom:0;時,絕對定位元素就抓到了可運用的空間了,這時你的margin:auto就生效了(神奇吧),如果你的絕對定位元素需要水平居中于父層,那你同樣可以設定left:0;right:0;來讓絕對定位元素取得空間可運用范圍,再讓marign-left與margin-right設定為auto即可居中。但此方式的缺點是你的定位元素必須有固定的寬高(百分比也算)才能正常居中。

          <h2>5.absolute + translate(-50%, -50%)</h2><div class="box box5">
           <div class="content">web前端開發</div></div>
          h2{ text-align: center;
          }.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; position: relative;
          }.content{ width: 400px; background: #ccc; height: 70px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;
          }
          

          6、absolute + translate

          適用情景:多行文字的垂直居中技巧

          在一個絕對定位居中的方式,此方式應該算是最方便的了,因為此居中的定位元素不需要固定的寬高,我們利用絕對定位時的top 與right設置元素的上方跟左方各為50%,再利用translate(-50%,-50%)位移居中元素自身寬與高的50%就能達成居中的目的了。(css3好棒)

          <h2>6.absolute + margin: auto</h2><div class="box box6">
           <div class="content">web前端開發</div></div>
          h2{ text-align: center;
          }.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; position: relative;
          }.box5 .content{ width: 400px; background: #ccc; position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%);
          }
          

          7、Flex + align-items

          適用情景:多行文字的垂直居中技巧

          Flex!這東西自從面世之后就不斷的考驗網頁開發者的良心,到底要不要拋棄float擁抱flex,我想這答案人人心中自由一把尺,但先碰Flex再碰Float可謂先甜后苦,這順序到底要倒吃甘蔗還是正吃甘蔗是實在難說,自從有了Flex之后,小孩考試一百分,設計網頁不跑版,客戶網頁都RWD,老板賺錢好開心,我也加薪(加班)好甘心,不由的說Flex真的是一個神物,我們只要設定父層display:flex以及設定次軸(cross axis)屬性align-items:center 就好了(說那么多結果重點就一行字是哪招啦),這個方式的優點是此層不需要設定高度即可自動居中,且原始代碼干凈無比,真的是用一次就讓你升天啦。

          <h2>7.Flex + align-items</h2><div class="box box7">
           <div class="content">web前端開發 </div></div>
          h2{ text-align: center;
          }.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; display: flex; justify-content: center; align-items: center; 
          }.content{ width: 400px; background: #ccc;
          }
          

          8、Flex + :before + flex-grow

          適用情景:多行文字的垂直居中技巧

          Flex有多種方式可以讓你把數據居中,適用Flex-grow的延展特性來達成,這個例子中Amos適用了flex-direction:column直式排法,搭配:before偽元素適用flex-grow伸展值能夠取得剩下所有空間的特性,把它設定成一半的剩余空間就能做到把內容數據準確的推到垂直中間位置,算是個傳統技法的延伸方式。這樣的話上面第七個方式不是比較快?

          <h2>8.Flex + before + flex-grow</h2><div class="box box8"> <div class="content">web前端開發</div></div>
          h2{ text-align: center;
          }.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; display: flex; flex-direction: column; align-items: center;
          }.box:before{ content: ''; flex-grow: .5;
          }.content{ width: 400px; background: #ccc;
          }
          

          9、Flex + margin

          適用情景:多行文字的垂直居中技巧

          繼續用Flex來居中,由于Flex元素對空間解讀的特殊性,我們只要在父層元素設定display:flex,接著在需要垂直居中的元素上設定margin:auto,即可自動居中

          <h2>9.Flex + margin</h2><div class="box box9">
           <div class="content">web前端開發</div></div>
          h2{ text-align: center;
          }.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; display: flex;
          }.content{ width: 400px; background: #ccc; margin: auto;
          }
          

          10、Flex + align-self

          適用情景:多行文字的垂直居中技巧

          align-self 應該大家都不陌生,基本上就是對flex次軸cross axis 的個別對齊方式只要對單一子層元素設定align-self:center就能達成垂直居中的目的了。

          <h2>10.Flex + align-self</h2><div class="box box10">
           <div class="content">web前端開發</div></div>
          h2{ text-align: center;
          }.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; display: flex; justify-content: center;
          }.content{ width: 400px; background: #ccc; align-self: center
          }
          

          11、Flex + align-content

          適用情景:多行文字的垂直居中技巧

          在正常的狀況下,align-content 僅能對次軸多行flex item做居中,但是當我今天子層元素不確定有多少個時,且有時可能會有單個的情況出現時,此技巧就能用到了(當然你也能有其他解法),既然是多行子元素才能用,那我們就為單個子組件多加兩個兄弟吧,使用:before以及:after 來讓子元素增加到多個,這樣就能使用flex的align-content屬性來居中

           <h2>11.Flex + align-content</h2><div class="box box11">
           <div class="content">web前端開發 </div></div>
          h2{ text-align: center;
          }.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; display: flex; flex-wrap: wrap; justify-content: center; align-content: center;
          }.content{ width: 400px; background: #ccc;
          }.box11:before,.box11:after{ content: ''; display: block; width:100%;
          }
          

          12、Grid + template

          適用情景:多行文字的垂直居中技巧

          CSS Grid最令人驚訝的就是這個template的功能了,簡直就是把塊元素當畫布在使用,我們僅需要把模板設置成三列,就能搞定垂直居中了

          <h2>12.Grid + template</h2><div class="box box12">
           <div class="content">web前端開發</div></div>
          h2{ text-align: center;
          }.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; display: grid; grid-template-rows: 1fr auto 1fr; grid-template-columns: 1fr auto 1fr; grid-template-areas: 
           '. . .'
           '. amos .'
           '. . .';
          }.content{ width: 400px; background: #ccc; grid-area: amos;
          }
          

          13、Grid + align-items

          適用情景:多行文字的垂直居中技巧

          align-items不僅是Flex可用,連CSS Grid也擁有此屬性可使用,但在Flex中align-items是針對次軸cross axis作對齊,而在CSS Grid中則是針對Y軸做對齊,你可以把它想象成是表格中儲存單元格的vertical-align屬性看待,就可以很好理解了

          <h2>13.Grid + align-items</h2><div class="box box13">
           <div class="content">web前端開發</div></div>
          h2{ text-align: center;
          }.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; display: grid; justify-content: center; align-items: center; 
          }.content{ width: 400px; background: #ccc;
          }
          

          14、Grid + align-content

          適用情景:杜航文字的垂直居中技巧

          CSS Grid的align-content跟Flex的align-content有點差異,CSS Grid對于空間的解釋會跟Flex有一些些的落差,所以導致align-content在Flex中僅能針對多行元素起作用,但在Grid中就沒這個問題,所以我們可以很開心的使用align-content來對子元素做垂直居中,絲毫不費力氣

          <h2>14.Grid + align-content</h2><div class="box box14">
           <div class="content">web前端開發</div></div>
          h2{ text-align: center;
          }.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; display: grid; justify-content: center; align-content: center; 
          }.content{ width: 400px; background: #ccc;
          }
          

          15、Grid + align-self

          適用情景:多行文字的垂直居中技巧

          align-self 應該大家都不陌生,基本上就是對grid Y軸的個別對齊方式,只要對單一子層元素設置為align-self:center就能達成垂直居中的目的了

          <h2>15.Grid + align-self</h2><div class="box box15"> <div class="content">web前端開發</div></div>
          h2{ text-align: center;
          }.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; display: grid; justify-content: center;
          }.content{ width: 400px; background: #ccc; align-self: center;
          }
          <h2>16.Grid + place-items</h2><div class="box box16">
           <div class="content">web前端開發</div></div>
          h2{ text-align: center;
          }.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; display: grid; height: 150px; margin: 0 auto; place-items: center;
          }.content{ width: 400px; background: #ccc;
          }
          

          17、Grid + place-content

          適用情景:多行文字的垂直居中技巧

          place-content這屬性有多少人用過,此屬性是align-content與justify-content的縮寫,簡單的說就是水平與垂直的對齊方式,想當然的,設置center就能居中了

          <h2>17.Grid + place-content</h2><div class="box box17">
           <div class="content">web前端開發</div></div>
          h2{ text-align: center;
          }.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; display: grid; height: 150px; margin: 0 auto; place-content: center;
          }.content{ width: 400px; background: #ccc;
          }
          

          18、Grid + margin

          適用情景:多行文字的垂直居中技巧

          繼續用Grid來居中,由于Grid元素對空間解讀的特殊性,我們只要在父層元素設定display:grid,接著在需要垂直居中的元素上設置margin:auto即可自動居中。怎么這描述似曾相識。

          <h2>18.Grid + margin</h2><div class="box box18">
           <div class="content">web前端開發</div></div>
          h2{ text-align: center;
          }.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; display: grid;
          }.content{ width: 400px; background: #ccc; margin:auto;
          }
          

          19、Display:table-cell

          適用情景:多行文字的垂直居中技巧

          這一招我想有點年紀的開發者應該都有看過,當然像我這么嫩的開發者當然是第一次看到啦,這一招的原理在于使用 CSS display屬性將div設置成表格的單元格,這樣就能利用支持存儲單元格對齊的vertical-align屬性來將信息垂直居中

          <h2>19.display: table-cell</h2><div class="box box19">
           <div class="content">web前端開發</div></div>
          h2{ text-align: center;
          }.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; text-align: center; display: table-cell; vertical-align: middle;
          }.content{ width: 400px; background: #ccc; margin: auto;
          }
          

          20、calc

          適用情景:多行文字的垂直居中技巧

          Cale是計算機英文單詞calculator的縮寫,這個由微軟提出的css 方法,真的是網頁開發者的一個福音。

          我們竟然可以在網頁中直接做計算,這真是太猛了,從此我們再也不用在那邊絞盡腦汁的數學計算了,或是想辦法用js來動態計算,我們可以很輕松的利用calc()這個方法,來將百分比及時且動態的計算出實際要的是什么高度,真可謂是劃時代的一個方法啊,但這個方法需要注意的是大量使用的話,網頁性能會是比較差的,所以請謹慎使用。

          <h2>20.calc</h2><div class="box box20">
           <div class="content">web前端開發</div></div>
          h2{ text-align: center;
          }.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto;
          }.content{ width: 400px; background: #ccc; position: relative; top:calc((100% - 70px) / 2); margin:auto; height: 70px;
          }
          

          21、Relative + translateY

          適用情景:多行文字的垂直居中技巧

          這個技巧是利用了top:50%的招式,讓你的元素上方能產生固定百分比的距離,接著讓要居中的元素本身使用tanslateY的百分比來達成垂直居中的需求,translate是一個很棒的屬性,由于translate的百分比單位是利用元素自身的尺寸作為100%,這樣讓我們要利用元素自身寬高做事變得方便很多。

          <h2>21.relative + translateY(-50%)</h2><div class="box box21">
           <div class="content">web前端開發</div></div>
          h2{ text-align: center;
          }.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto;
          }.content{ width: 400px; background: #ccc; position: relative; top: 50%; transform: translateY(-50%); margin: auto;
          }
          

          22、padding

          適用情景:多行文字的垂直居中技巧

          什么!這也算垂直居中技巧,連我奶奶都知道這方式吧

          對的,這的確也算是一種垂直居中的方式,不可諱言的這方式真的是簡單過頭了,以至于有些開發者認為這種方式都不能算是一種垂直居中的技巧,但同樣的你無法反駁的是,我的數據的確垂直居中啦,好啦,就當我硬凹吧,你說的對,好吧

          <h2>22.padding</h2><div class="box box22">
           <div class="content">web前端開發</div></div>
          h2{ text-align: center;
          }.box{ width: 500px; border: 1px solid #f00; margin: auto; height: auto; padding: 50px 0;
          }.content{ width: 400px; background: #ccc; margin: auto;
          }
          

          23、Write-mode

          適用情景:多行文字的垂直劇種技巧

          這個方式應該是比較少見到的有人使用的了,這個想法是被老友Paul所激發的,write-mode這個css屬性的功能基本上跟垂直居中是八竿子打不著,它的用途是改變文字書寫的方向從橫變豎,且支持度從很早期的IE5就有支持了,但當時Amos很少使用,一來是網頁多是橫書較多,另外當時除了IE瀏覽器意外,其他瀏覽器的支持度都不是很好,也就很少使用了。

          使用write-mode將一整個文字容器變成直書,接著將此容器利用text-align:center來達到垂直居中的目的,白話一點的解說就是,你把原本橫排的文字變成豎排,所以原本橫排用到的水平對齊方式,就變成了控制直排的中間了,原理就是這么簡單。

          但要特別注意的是瀏覽器對此語法的支持度來說,需要拆開寫法才行,不然某些瀏覽器的語法不同,可能會讓你的網頁在某些瀏覽器上看起來無效,這會是最需要注意到的

          <h2>23.writing-mode</h2>立馬來看Amos實際完成的<div class="box box23">
           <div class="content">
           <div class="txt">web前端開發 </div>
           </div></div>
          h2{ text-align: center;
          }.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; writing-mode: tb-lr; /* for ie11 */
           writing-mode: vertical-lr; text-align: center; margin:0 auto;
          }.content{ width: 400px; background: #ccc; display: inline-block; /* for ie & edge */
           width: 100%; writing-mode: lr-tb; margin: auto; 
           text-align: left;
          }.box .txt{ width: 80%; margin: auto;
          }
          

          看完了這23種css垂直居中寫法,不知道你用過哪幾種呢?是否你也有不為人知的小技巧呢?留言區里歡迎你的分享。

          們一般在用vue + elementUI的時候經長會用到 el-dialog組件,平時也沒太在意到el-dialog的居中問題,因為用到el-dialog的時候內容也不多。今天剛好碰到一個內容比較多,又剛好用el-dialog的時候就差一點點又會出現滾動的情況,所以就想能不能垂直居中一下,發現官方沒這功能,只能自己改css。

          如圖,這樣不居中的情況很難看,(不介意難看的略過)

          我也是在網上找了一下辦法,說來也簡單,自己寫個css蓋掉原來官方的css就可以了

          <style scoped>
          /deep/.el-dialog {
            display: flex;
            display: -ms-flex; /* 兼容IE */
            flex-direction: column;
            -ms-flex-direction: column; /* 兼容IE */
            margin: 0 !important;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            max-height: calc(100% - 30px);
            max-width: calc(100% - 30px);
          }
          /deep/.el-dialog .el-dialog__body {
            max-height: 100%;
            flex: 1;
            -ms-flex: 1 1 auto; /* 兼容IE */
            overflow-y: auto;
            overflow-x: hidden;
          }
          </style>
          

          這種css 網上很多,但是要注意css前面的 /deep/ 深度選擇器 這個很重要。不了解的/deep/的同學自行百度 特別是在 <style scoped>里

          最終效果

          擊右上方紅色按鈕關注“小鄭搞碼事”,每天都能學到知識,搞懂一個問題!

          讓元素垂直居中的二十三個方法,只列出解決方案,及適用場景,哪個需要我舉例子說明的,可以給小鄭留言。

          方法一、Line-height

          適用場景:單行文字垂直居中技巧

          方法二、Line-height + inline-block

          適用場景:多對象垂直居中技巧

          方法三、:before + inline-block

          適用場景:多對象的CSS垂直居中技巧

          方法四、absolute + margin負值

          適用場景:多行文字的垂直居中技巧


          主站蜘蛛池模板: 伊人久久大香线蕉AV一区二区| 亚洲AV无码一区二区三区系列| 成人精品视频一区二区| 一区二区三区美女视频| 伊人色综合一区二区三区| 国产精品一区视频| 国产免费无码一区二区| 夜色阁亚洲一区二区三区| 国产精品成人一区无码 | 无码毛片一区二区三区中文字幕| 国产色综合一区二区三区| 午夜肉伦伦影院久久精品免费看国产一区二区三区 | 国产精品视频一区二区三区经| 风间由美性色一区二区三区| 国产精品毛片a∨一区二区三区| 国产伦精品一区二区三区免费下载| 糖心vlog精品一区二区三区| 波多野结衣一区二区| 亚洲AV无码一区二区三区电影| 无码人妻精品一区二区蜜桃网站| 国产成人一区二区三区在线观看| 亚洲乱色熟女一区二区三区丝袜| 在线观看亚洲一区二区| 秋霞午夜一区二区| 久久久久人妻一区精品果冻| 国产成人精品无码一区二区老年人| 国产精品一区二区不卡| 亚洲av乱码一区二区三区香蕉| 亚洲国产美女福利直播秀一区二区| 污污内射在线观看一区二区少妇 | 久久精品无码一区二区app| 乱色熟女综合一区二区三区| 国产精品无码不卡一区二区三区 | 天堂Aⅴ无码一区二区三区| 中文字幕久久久久一区| 高清国产AV一区二区三区| 国产欧美色一区二区三区| 日本香蕉一区二区三区| 日本高清成本人视频一区| 精品国产一区二区三区麻豆| 国模无码视频一区二区三区|