1.1 行内元素

.parent { text-align: center; }

1.2 塊級元素

1.2.1 塊級元素一般居中方法

.son { margin: 0 auto; }

1.2.2 子元素含 float

.parent{ width:fit-content; margin:0 auto; } .son { float: left; }

1.2.3 Flex 彈性盒子

1） flex 2012版

.parent { display: flex; justify-content: center; }

2）flex 2009版

.parent { display: box; box-orient: horizontal; box-pack: center; }

1.2.4 絕對定位

1）transform

.son { position: absolute; left: 50%; transform: translate(-50%, 0); }

2）left: 50%

.son { position: absolute; width: 寬度; left: 50%; margin-left: -0.5*寬度 }

3）left/right: 0

.son { position: absolute; width: 寬度; left: 0; right: 0; margin: 0 auto; }

小結

以上是 CSS 水平居中的 8 種方法。

2.1 行内元素

.parent { height: 高度; } .son { line-height: 高度; }

注：① 子元素 line-height 值為父元素 height 值。② 單行文本。

2.2 塊級元素

2.2.1 行内塊級元素

.parent::after, .son{ display:inline-block; vertical-align:middle; } .parent::after{ content:''; height:100%; }

适應 IE7。

2.2.2 table

.parent { display: table; } .son { display: table-cell; vertical-align: middle; }

優點

• 元素高度可以動态改變, 不需再CSS中定義, 如果父元素沒有足夠空間時, 該元素内容也不會被截斷。

缺點

• IE6~7, 甚至IE8 beta中無效。

2.2.3 Flex 彈性盒子

1）flex 2012版

.parent { display: flex; align-items: center; }

優點

• 内容塊的寬高任意, 優雅的溢出。
• 可用于更複雜高級的布局技術中。

缺點

• IE8/IE9不支持。
• 需要浏覽器廠商前綴。
• 渲染上可能會有一些問題。

2）flex 2009版

.parent { display: box; box-orien: vertical; box-pack: center; }

優點

• 實現簡單, 擴展性強。

缺點

• 兼容性差, 不支持IE。

2.2.4 絕對定位

1）transform

.son { position: absolute; top: 50%; transform: translate( 0, -50%); }

優點

• 代碼少。

缺點

• IE8不支持, 屬性需要追加浏覽器廠商前綴, 可能幹擾其他 transform 效果, 某些情形下會出現文本或元素邊界渲染模糊的現象。

2）top: 50%

.son { position: absolute; top: 50%; height: 高度; margin-top: -0.5高度; }

優點

• 适用于所有浏覽器。

缺點

• 父元素空間不夠時, 子元素可能不可見(當浏覽器窗口縮小時,滾動條不出現時).如果子元素設置了overflow:auto, 則高度不夠時, 會出現滾動條。

3）top/bottom: 0;

.son { position: absolute; top: 0; botton: 0; margin: auto 0; }

優點

• 簡單。

缺點

• 沒有足夠空間時, 子元素會被截斷, 但不會有滾動條。

小結

以上是 CSS 垂直居中的 8 種方法及其優缺點。

鍊接：https://juejin.im/post/5c8f9e595188252db756920c

作者：Agoreal

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部