在前端面試中，CSS相關的問題一般不會問的太多，但是有一個問題經常被選為面試題。那就是：div 水平垂直居中你有哪些辦法？

這道題可以考察候選人對CSS布局方式的理解，而且非常貼近日常工作，比較适合作為面試題。今天我就幫大家梳理一下CSS實現div水平垂直居中的方法，建議收藏。

為了演示，首先創建兩個嵌套的 div，然後設置一下大小和背景顔色這樣比較容易看出效果。代碼如下：

// html <div class="outer outer-box"> <div class="inner inner-box"></div> </div> // css <style> .outer { height: 100px; width: 100px; background-color: royalblue; } .inner { height: 50px; width: 50px; background-color: red; } <style>

設置完的效果就是這樣，然後我們需要把内部的div 水平垂直居中。準備就緒，正式開始。我們分别使用 Flex 布局，Position布局， Grid布局三種方式。

Flex 是Flexible Box的縮寫，意為”彈性布局”。Flexible Box 模型是一種一維的布局模型，一次隻能處理一個維度上的布局。flex布局有兩根軸線，主軸和交叉軸。flex就是根據這兩個軸線布局元素。

1.1 對外層div設置flex布局

在外層 div 上設置 justify-content: center; align-items: center; 屬性， display 設置為 flex。即可實現水平垂直居中。

1.2 内外div分别設置

結果如下圖：

Flex實現水平處置居中

Position布局是傳統的布局方式，position屬性指定定位方式，利用CSS盒模型實現定位布局。

2.1 内部div使用 margin 屬性居中

2.2 内部 div 使用 transform 屬性居中

實現結果如下：

Grid（網格）布局被稱為最強大的CSS布局方案，它可以将一個頁面劃分為幾個主要區域，以及定義這些區域的大小、位置、層次等關系。

上面這種布局，Grid非常擅長。Flex布局屬于一維布局，Grid布局可以将容器分為行和列，對單元格進行布局，屬于二維布局。

3.1 外層div使用 place-content 屬性

3.2 外層div使用Grid布局

3.3 内外div分别設置

實現結果如下：

常見的問題也不見得簡單，前端知識還是常學常新的。了解不同類型的CSS布局方式，對處理實際問題也很有幫助。

以上就是CSS實現div水平垂直居中的7種方式。如果你有别的方式，歡迎和大家一起分析。

如果覺得文章對您有幫助，歡迎收藏，轉發~

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