實現div水平垂直居中的7種方式

前端面試中，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種方式。如果你有別的方式，歡迎和大家一起分析。

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

果 .parent 的 height 不寫，你只需要 padding: 10px 0; 就能將 .child 垂直居中；
如果 .parent 的 height 寫死了，就很難把 .child 居中

忠告：能不寫死高度就不寫死高度

demo地址 https://jsbin.com/cuyifid/edit?html,css,output

方法1：table 自帶功能

使用 table 標簽，自帶的特性可以使元素垂直居中

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>使用 table 自帶屬性實現垂直居中</title>
</head>
<body>
  <table class="parent">
    <tr>
      <td class="child">
        內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
        內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
        內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
      </td>
    </tr>
  </table>
</body>
</html>
復制代碼

CSS

<div id="parent">
<!-- 定義子級元素 -->
<div id="child">居中布局</div>
</div>

過以下CSS樣式代碼實現水平方向居中布局效果

.parent{position:relative;}
.child{position: absolute;top: 50%;transform: translateY(-50%)}

優點:

父級元素是否脫離文檔流, 不影響子級元素垂直居中效果

缺點:

transform屬性是CSS3中新增屬性, 瀏覽器支持情況不好

在線咨詢

上一篇：JavaScript+css實現的圖片切換動畫特效html頁面前端源碼
下一篇：零基礎入門前端HTML知識整理

您的項目需求

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