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

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

為了演示，首先創(chuàng)建兩個嵌套的 div，然后設(shè)置一下大小和背景顏色這樣比較容易看出效果。代碼如下：

// 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>

設(shè)置完的效果就是這樣，然后我們需要把內(nèi)部的div 水平垂直居中。準備就緒，正式開始。我們分別使用 Flex 布局，Position布局， Grid布局三種方式。

flex布局

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

1.1 對外層div設(shè)置flex布局

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

1.2 內(nèi)外div分別設(shè)置

結(jié)果如下圖：

Position布局

Position布局是傳統(tǒng)的布局方式，position屬性指定定位方式，利用CSS盒模型實現(xiàn)定位布局。

2.1 內(nèi)部div使用 margin 屬性居中

2.2 內(nèi)部 div 使用 transform 屬性居中

實現(xiàn)結(jié)果如下：

Grid布局

Grid（網(wǎng)格）布局被稱為最強大的CSS布局方案，它可以將一個頁面劃分為幾個主要區(qū)域，以及定義這些區(qū)域的大小、位置、層次等關(guān)系。

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

3.1 外層div使用 place-content 屬性

3.2 外層div使用Grid布局

3.3 內(nèi)外div分別設(shè)置

實現(xiàn)結(jié)果如下：

總結(jié)

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

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

如果覺得文章對您有幫助，歡迎收藏，轉(zhuǎn)發(fā)~

在web開發(fā)中，我們經(jīng)常會遇到需要將元素垂直居中的需求。垂直居中既可以讓頁面看起來更美觀，又可以提升用戶體驗。本文將介紹使用CSS實現(xiàn)垂直居中的幾種常見方法，并給出具體的解決步驟。

CSS實現(xiàn)垂直居中的方法

1. 使用table布局

將元素放置在一個table元素中，然后使用vertical-align: middle;屬性使其垂直居中。

.container {
display: table;
}
.centered-element {
display: table-cell;
vertical-align: middle;
}

2. 使用Flexbox布局

Flexbox是CSS3中引入的一種布局方式，非常方便實現(xiàn)垂直居中。

.container {
display: flex;
align-items: center;
justify-content: center;
}

3. 使用絕對定位和transform

通過設(shè)置父元素的position: relative;，子元素的position: absolute;以及transform屬性來實現(xiàn)垂直居中。

.container {
position: relative;
}
.centered-element {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

4. 使用line-height屬性

當(dāng)元素只包含一行文本時，可以使用line-height屬性實現(xiàn)垂直居中。

.container {
line-height: 100px; /* 設(shè)置和父容器同樣的高度 */
}

5. 使用CSS Grid布局

CSS Grid布局也可以輕松實現(xiàn)垂直居中。

.container {
display: grid;
place-items: center;
}

結(jié)論

本文介紹了5種常用的方法來使用CSS實現(xiàn)垂直居中布局。通過使用Flexbox、絕對定位和負邊距、表格布局，可以輕松實現(xiàn)網(wǎng)頁元素的垂直居中。根據(jù)實際需求，選擇合適的方法來實現(xiàn)垂直居中將有助于提高網(wǎng)頁的可讀性和用戶體驗。