css居中總結

2021-09-12 18:37:22 字數 2161 閱讀 2435

一直有個想法要把各種居中的方法總結一下，但還是一直沒有時間去整理。最近剛好在做樣式重構的專案，順便把一下自己有用過的或積累的居中方法給總結一下。
行內元素的居中比較簡單，直接使用text-align就可以達到居中效果

/* 行內元素 */


.parent4
margin auto

這是最常用到的塊級水平居中，利用margin:auto自動達到居中的效果，不過前提是子元素必須知道寬度

/* 必須設定子元素寬度 */


.child1
利用inline-block實現水平居中

.parent2 


/* 必須通過父元素 */


.child2
利用css3新增的width屬性fit-content實現很多情況下我們並不清楚乙個元素的具體尺寸是多少，但是又要實現水平居中。這個時候我們想起float，自動撐開寬高，但是可惜的是float的脫離了文件流並不能用margin:auto去實現元素的水平居中。inline-block又必須有個父級對其進行設定居中。css3新增加了width裡的屬性實現了元素類似於float,inline-block的包裹效果，並且可以使用margin: auto進行居中。fit-content會根據你的內容去包裹你的元素。在此處不細說明，該興趣的小夥伴可以看看張鑫旭老師對這幾個新增的屬性的講解

/* width的其他屬性 */


.parent3
line-height實現當行文字垂直居中

/* 行內元素，當行文字垂直居中 */


.parent1
margin負邊距實現

該方法使用絕對定位利用margin負值將其居中，前提是需要 提前知道尺寸

.parent2 


.child2
如何在不知道尺寸的情況下垂直居中呢，css3——translate屬性的出現為我們提供了可能。該方法利用translate以自身的寬高為基準來達到居中效果，相當於margin負值的作用，不過我們不需要知道尺寸，translate幫我們解決了。transform中translate偏移的百分比值是相對於自身大小的，

/* 塊級元素： 絕對定位 + transform  優點: 不需要提前知道尺寸


缺點: 相容性不好*/


.parent3 


.child3
塊級元素：絕對定位 + margin: auto;結合以上兩種，在介紹乙個利用絕對定位的乙個很好用的方法

這是從張鑫旭老師的部落格搬運過來的詳情戳這裡。

優點：不需要根據寬高去做相應的位移，自動幫你居中好了，相容性好

/* 塊級元素：絕對定位 + margin: auto; 優點：不需要根據寬高去做相應的位移，相容性好 */


.parent4 


.child4
利用display: table-cell實現垂直居中 display的table和table-cell一般情況下用的不多，所以很少有人去關注它。這個實現的原理就是把其變成**樣式，再利用**的樣式來進行居中，在某些情況下還是很方便的。

/* 塊級元素：display: table-cell */


.parent5 


.child5 


/* 水平垂直居中 */


.parent7 


.child7
利用calc()計算屬性缺點: 相容性差，需要計算，消耗效能，需要提前知道尺寸

.parent8 


.child8
利用偽元素實現居中(這個原理我還沒搞懂，但是實踐過真的ok)

.parent9 


.child9 


.parent9::before
塊級元素：display: flex缺點：在pc上相容性不好

.parent10 


.child10
以上是分別總結了水平居中和垂直居中常用的方法，要想實現水平垂直居中可以自己組合搭配一下。方法目前總結了這幾種，之後有新的方法也會持續更新，未完待續**中....

css 居中總結

1.定寬塊狀元素 水平居中 divstyle 2.不定寬塊狀元素 水平居中 wrap class wrap 設定我所在的div容器水平居中 div 2.display inline textalign center 它將塊狀元素的 display 型別改為 inline，變成了行內元素，所以少了一些...

css居中總結

給父元素設定 text align center 但對浮動元素，絕對定位元素無效設定margin 0 auto 將塊級元素display設定為inline，然後使用text align center 給父元素設定float,position relative,left 50 子元素設定positio...

css居中總結

1.我們可以通過給該元素的父級設定margin 0 auto的方式來實現。html class parent class child center div div css child此時檢查元素即可即可實現內層的div實現了居中,這種方式是最為我們熟知的，其缺點是需要設定子元素的寬度。2.通過pos...