css實現水平垂直居中的七種方式（垂直居中的幾種實現方式）

2023-04-15 15:35:34

設計是帶有主觀色彩的，同樣網頁設計中的 css 一樣讓人摸不頭腦。網上列舉的實現方式一大把，或許在這裡你都看到過，但既然來到這裡我希望這篇能讓你看有所收穫，畢竟這也是前端面試的基礎。

備註：如下頁面效果中的灰色方框高度都做了限定為 100 px（即父元素）

1、line-height 方式

line-height 設置行高，多用於控制多行文本之間的間隔大小。但利用它的特性也可以控制垂直居中。

值得注意：

內聯元素無法設置固定高度 height ，如果設置了 line-height 即為該元素所屬行的高度，但其中的文本是垂直居中的。

塊級元素需要轉為內聯塊級元素 inline-block ，並且需要定高，對其中文本需設值 vertical-align 垂直居中屬性。

代碼舉例

頁面效果

2、定高圖片 vertical-align 方式

上例中已經提到了 vertical-align 屬性，應該注意到它需要和 line-height 一同使用才有效果。

本例除了說明該屬性的使用場景外，另外添加了 img 內聯塊級元素的垂直居中舉例。具體代碼如下：

代碼舉例

頁面效果

3、table 方式

通過設置父類元素的布局為 table，然後將子元素的布局設置為 table-cell 單元格方式，最後通過 vertical-align 使元素垂直居中。

代碼舉例

頁面效果

4、position margin auto 方式

設置子元素絕對定位（注意，這將不關心當前元素是否塊級還是內聯元素），然後將該元素的定位位置調為置頂和置底，將 margin 設置為 auto 達到最後效果。

代碼舉例

頁面效果

5、position margin 偏移方式

類似上例，只需設置 top 置頂，然後調試 margin-top 來使得子元素偏移完成垂直居中。

代碼舉例

頁面效果

6、position transform 方式

和水平居中一樣，先設置為絕對布局，並設置 top 50%、bottom 50%，最後通過 transform 設置 x 軸、y 軸的偏移量來調整子元素的定位。

代碼舉例

頁面效果

7、flex 方式

彈性布局，最簡單的方式。一個 align-items 搞定。

代碼舉例

頁面效果

上面只列舉了 7 種垂直居中的實現方法，相信還要更多的方式。不過不管哪種方法，能在業務代碼實踐中最快速、最準確的運用才是最佳實踐。

相關連結

css 水平居中的幾種實現方式

希望在讀的各位能有所收穫。

一名工作在一線的前端工程師，樂於實踐，並分享前端開發經驗。

關注【前端雨爸】，歡迎評論留言，願與各位交流進步。

點擊 ↙ 了解更多，了解更多前端開發技術文章。