各種居中方案

2022-05-14 09:48:34 字數 2027 閱讀 7440

元素居中是常見的場景，此頁為總結各種實現方式

內聯元素（inline,inline-block等），將父元素的text-align屬性設為center。

text-align css屬性定義行內內容（例如文字）如何相對它的塊父元素對齊。

塊級元素（block等），設定margin-left,margin-right為auto,此時左右外邊距會平分水平方向的多餘空間，實現居中。注意塊級元素要有固定寬度，否則會鋪滿父元素，佔據100%寬度。

/* 內聯元素 */


.inline-center-parent


/* 塊級元素 */


.block-center
相對於水平居中，垂直居中實現稍微複雜一些

如果是單行時，設定元素了的line-height與父元素的height一致即可，line-height會繼承，設定在父元素上也一樣。

/*容器樣式*/


.inline-center-parent
多行時，上面的樣式就會出現問題，因為每行的高度都和容器高度一樣，會溢位，此時可以使用table-cell來實現居中。

/*容器樣式*/


.inline-center-parent
也可以將多行內聯元素用塊級元素包裹，然後就變成了塊級元素的居中問題。

垂直居中可以使用絕對定位處理，top設為50%（top以容器的高度計算百分比），然後再想辦法讓塊元素向上移動自身的一半

.block-center-parent 


.block-center
乙個思路是通過transform變化（tranform平移以自身寬高進行計算），向上移動自身的一半

.block-center
另乙個思路是通過margin:auto,沒錯！垂直居中也可以使用margin:auto來實現。

.block-center
margin-top,margin-bottom在普通情況下，設定為auto時，預設為0；但是絕對定位脫離文件流，又通過top,left,bottom,right指定子元素的邊界後，子元素會預設填充整個容器，此時margin：auto會讓垂直方向上也平分多餘空間。注意需要指定height和width，否則height和width會填充滿整個空間，margin均為0；

使用flex

flex應該是最便捷方式

.block-center-parent
上面的一些方式可以同時實現水平居中和垂直居中。

display: absolute+margin:auto

.block-center
display: absolute+transfrom

/* 水平方向也使用transform */


.block-center
display:flex

.block-center-parent
另一種方式是

.block-center-parent 


.block-center

各種水平居中方法

1 text algin center 可以使行內元素居中 也可以使塊級元素中的文字居中，但不可以使塊級元素本身居中 2 margin 0 auto 僅可以使塊級元素居中，inline和inline block都不可以。3 絕對定位的居中 left 100px right 100px 左右同時設定相...

各種居中方式小記

1.單行內容的居中 middle demo 1 2.父元素未設定高度，內容居中 middle demo 2 3.子元素有固定高度，使用絕對定位的 div，把它的 top 設定為 50 top margin 設定為負的 content 高度。content 4.使用 的 vertical align ...

各種居中方式大全

css居中是前端工程師經常要面對的問題，也是基本技能之一。今天有時間把css居中的方案彙編整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15種。如有漏掉的，還會陸續的補充進來，算做是乙個備忘錄吧。內聯元素水平居中 利用text align center可以實現在塊級元素內部的內聯元素水平...