css篇-前端面試中常問的div居中方法

上又要到秋招的時候了，又有不少人打算換工作了。前端在面試中總會被問到的一道基礎題div居中方法，這里給大家總結一下都有哪些常用的方法。

絕對定位

父級元素（parent）采用相對定位（relative），需要居中的元素（demo）采用絕對定位（absolute）。
居中元素向上偏移50%，向左偏移50%，此時左頂點位于中心，不過我們需要的是整體居中，所以在偏移自身一半的寬高。（如下圖）

還未偏移一半自身寬高

<style>
    .parent {
      position: relative;
      width: 500px;
      height: 500px;
      border: solid red 1px;
    }
    .demo {
      position: absolute;
      width: 100px;
      height: 100px;
      border: solid blue 1px;
      top: 50%;
      left: 50%;
      margin-top: -50px;
      margin-left: -50px;
    }
  </style>
  <body>
    <div class="parent">
      <div class="demo"></div>
    </div>
  </body>

彈性方法居中

通過flex彈性布局設置垂直居中和水平居中

  <style>
    .parent {
      width: 500px;
      height: 500px;
      border: solid red 1px;
      display: flex;
      // 垂直，水平居中
      align-items: center;
      justify-content: center;
    }
    .demo {
      width: 100px;
      height: 100px;
      border: solid blue 1px;
    }
  </style>
  <body>
    <div class="parent">
      <div class="demo"></div>
    </div>
  </body>

使用transform居中

在子元素不知道自身寬高情況，使用transform進行比偏移。

  <style>
    .parent {
      position: relative;
      width: 500px;
      height: 500px;
      border: solid red 1px;
    }
    .demo {
      position: absolute;
      border: solid blue 1px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
  <body>
    <div class="parent">
      <div class="demo">居中</div>
    </div>
  </body>

以上3種是常用的方法，當然還有其他居中方法比如grid布局，table-cell布局等。

前端面試中，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布局

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布局是傳統的布局方式，position屬性指定定位方式，利用CSS盒模型實現定位布局。

2.1 內部div使用 margin 屬性居中

2.2 內部 div 使用 transform 屬性居中

實現結果如下：

Grid布局

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

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

3.1 外層div使用 place-content 屬性

3.2 外層div使用Grid布局

3.3 內外div分別設置

實現結果如下：

總結

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

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

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

文翻譯自 How to Center a Div Using CSS Grid，作者：Fimber Elemuwa, Ralph Mason。略有刪改

在本文中，我們將介紹使用CSS Grid在水平和垂直方向上居中div的五種方法，當然這些技術可用于任何類型的元素。

初始化

我們首先創建一個容器，其中包含一個簡單的div元素，我們將使用它來演示這些居中方法。下面是HTML：

<article>
  <div></div>
</article>

下面是我們的初始CSS：

article {
  width: 100%;
  min-height: 100vh;
  background: black;
  display: grid;
}

div {
  width: 200px;
  background: yellow;
  height: 100px;
}

在下面所有的例子中，我們將使用display: grid屬性。這將<article>元素建立為網格容器，并為該容器生成塊級網格。我們已經將網格容器設置為寬（width: 100%）和高（min-height: 100vw），這樣我們的div就有足夠的空間在其中移動。

接下來讓我們來看看將div居中的各種方法。

1.使用 CSS Grid 和 place-self 將Div居中

place-self屬性提供了一種簡單的方法來水平和垂直居中網格項。它用于將網格項置于其網格單元格的中心。

將div居中就像這樣簡單：

article {
  display: grid;
}

div {
  place-self: center;
}

place-self屬性是justify-self（水平）和align-self（垂直）屬性的簡寫。

使用place-self對于在網格內居中單個項目特別有用，因為它使其他網格項目可以自由地以不同的方式定位。但這并不是使用Grid使元素居中的唯一方法，繼續看看其他的一些方法。

2.使用 CSS Grid 和 place-items 居中Div

place-items屬性是justify-items（水平）和align-items（垂直）的簡寫。這些屬性應用于網格容器而不是每個網格項，當我們希望所有網格項具有相同的位置時，這些屬性非常有用。

將以下CSS代碼添加到父容器：

article {
  display: grid;
  place-items: center;
}

我們可以基于初始代碼添加更多的div元素，看看會發生什么。結果是每個div將在其網格單元格內水平和垂直居中，如下圖所示（通過瀏覽器的網格檢查器）。

3.使用 place-content 居中Div

place-content屬性是justify-content（水平）和align-content（垂直）的簡寫。雖然place-self和place-items控制網格項如何放置在其指定的網格單元格中，但place-content指定網格容器的整個內容應如何對齊（即，所有網格項被視為一個組）。在我們的演示中，只有一個網格項（我們的單個黃色div），因此我們也可以使用place-content將其置于其容器的中心。

將以下CSS代碼添加到父容器：

article {
  display: grid;
  place-content: center;
}

這里有幾點需要注意。到目前為止，在所有的例子中我們都使用了center的值。但是到目前為止，我們已經探索的每個屬性都有各種其他的放置物品的值。place-content有很多值，另外兩個值也可以用于居中我們的div：space-around和space-evenly。

此外，在我們的簡單例子中，一個div在容器中居中，我們甚至可以混合和匹配我們上面看到的屬性。我們可以使用justify-content和align-items來居中div，有興趣的可以嘗試看看。

4.使用 CSS Grid 和 Auto Margins 居中

像往常一樣，我們將使用display: grid來定位父容器。我們還將使用margin: auto為div指定自動邊距。這使瀏覽器自動計算div周圍的可用空間，并在其網格單元格內垂直和水平劃分，將div放置在中間：

article {
  display: grid;
}

div {
  margin: auto;
}

5.使用 CSS Grid 網格區域居中div

最后一個方法我們將深入探討Grid布局的強大功能，因為我們將研究兩種方法來將div居中放置在具有多行和多列的網格中。

以下是我們的基本CSS：

article {
  display: grid;
  grid-template-columns: 1fr 200px 1fr;
  grid-template-rows: 1fr 100px 1fr;
}

div {
  background: yellow;
  grid-column: 2;
  grid-row: 2;
}

我們顯式地布局了一個網格，中間有一個區域來放置我們的div。我們現在甚至不需要在div上設置尺寸，因為網格軌跡會處理這個問題。我們在網格的中間指定一個網格單元格，其寬度為200px，高度為100px，然后我們告訴div從第二條網格線和第二條行線開始。(默認情況下，它將僅跨到每個方向上的下一條軸網線。）div元素被很好地放置在其容器的中心，如下所示。

下圖顯示了位于其網格軌跡內的div。

網格布局提供了各種不同的方法來實現這一結果。最后我們做與上面相同的事情，但這次為我們的div使用一個命名區域：

article {
  display: grid;
  grid-template-columns: 1fr 200px 1fr;
  grid-template-rows: 1fr 100px 1fr;
  grid-template-areas: ".  .  ."
                       ". box ."
                       ".  .  .";
}

div {
  background: yellow;
  grid-area: box;
}

在這里，我們設置一個名為grid-area的box，然后描述它應該位于網格上的什么位置，用一個簡單的點（.）指定哪些網格單元格是空的。

這種布局方法的優點是，它可以很容易地將許多其他元素放置在我們想要的任何地方，這就是網格布局的強大之處。

結論

這些方法中的每一個都允許我們在容器中水平和垂直地居中一個div。place-self和margin: auto選項很好，因為它們直接應用于居中的元素，而不是其容器。但是本文中介紹的所有方法都是高效的，并且可以很好地完成這項工作。在各種場景中，我們可能希望將元素置于中心，因此擁有一系列工具來實現該目標非常重要。

在演示示例中，我們只是使用了一個空的div，但是當然我們可以向div添加內容，居中仍然有效。而且這些居中技術同樣適用于div以外的元素。

最后

有興趣的可以看看原文，可以在線體驗不同顏色格式是如何工作的。看完本文如果覺得有用，記得點個贊支持，收藏起來說不定哪天就用上啦～

專注前端開發，分享前端相關技術干貨，公眾號：南城大前端（ID: nanchengfe）

在線咨詢

上一篇：Django 博客實現簡單的全文搜索
下一篇：javascript的onchange、oninput、onkeyup你能區別嗎？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商