如何居中一個元素（終結版）

浪裡行舟發表於2018-10-15

前言

本文主要介紹水平居中，垂直居中，還有水平垂直居中各種辦法，思維導圖如下：

如需本文的思維導圖，請猛戳Github個人部落格

一、水平居中

1.行內元素水平居中

利用 text-align: center 可以實現在塊級元素內部的行內元素水平居中。此方法對inline、inline-block、inline-table和inline-flex元素水平居中都有效。

   .parent{
        text-align:center;//在父容器設定
    }
複製程式碼

此外，如果塊級元素內部包著也是一個塊級元素，我們可以先將其由塊級元素改變為行內塊元素，再通過設定行內塊元素居中以達到水平居中。

<div class="parent">
  <div class="child">Demo</div>
</div>
<style>
  .parent{
    text-align:center;  
  }
  .child {
    display: inline-block;
  }
</style>
複製程式碼

2.塊級元素的水平居中

這種情形可以有多種實現方式，下面我們詳細介紹:

①將該塊級元素左右外邊距margin-left和margin-right設定為auto

.child{
    width: 100px;//確保該塊級元素定寬
    margin:0 auto;
}
複製程式碼

②使用table+margin

先將子元素設定為塊級表格來顯示（類似），再將其設定水平居中

display:table在表現上類似block元素，但是寬度為內容寬。

<div class="parent">
  <div class="child">Demo</div>
</div>
<style>
  .child {
    display: table;
    margin: 0 auto;
  }
</style>
複製程式碼

③使用absolute+transform

先將父元素設定為相對定位，再將子元素設定為絕對定位，向右移動子元素，移動距離為父容器的一半，最後通過向左移動子元素的一半寬度以達到水平居中。

<div class="parent">
  <div class="child">Demo</div>
</div>
<style>
  .child {
    position:absolute;
    left:50%;
    transform:translateX(-50%);
  }
  .parent {
    position:relative;
  }
</style>
複製程式碼

不過transform屬於css3內容，相容性存在一定問題，高版本瀏覽器需要新增一些字首。

④使用flex+justify-content

通過CSS3中的佈局利器flex中的justify-content屬性來達到水平居中。

<div class="parent">
  <div class="child">Demo</div>
</div>
<style>
  .parent {
    display: flex;
    justify-content:center;
  }
</style>
複製程式碼

⑤使用flex+margin

通過flex將父容器設定為為Flex佈局，再設定子元素居中。

<div class="parent">
  <div class="child">Demo</div>
</div>
<style>
  .parent {
    display: flex;
  }
  .child {
    margin:0 auto;
  }
</style>
複製程式碼

3.多塊級元素水平居中

①利用flex佈局

利用彈性佈局(flex)，實現水平居中，其中justify-content 用於設定彈性盒子元素在主軸（預設橫軸）方向上的對齊方式，本例中設定子元素水平居中顯示。

 #container {
    display: flex;
    justify-content: center;
}
複製程式碼

原始碼演示

②利用inline-block

將要水平排列的塊狀元素設為display:inline-block，然後在父級元素上設定text-align:center，達到與上面的行內元素的水平居中一樣的效果。

.container {
text-align: center;
}
.inline-block {
display: inline-block;
}
複製程式碼

原始碼演示

4.浮動元素水平居中

對於定寬的浮動元素，通過子元素設定relative + 負margin
對於不定寬的浮動元素，父子容器都用相對定位
通用方法(不管是定寬還是不定寬)：flex佈局

①定寬的非浮動元素

通過子元素設定relative + 負margin,原理見下圖：

注意：樣式設定在浮動元素本身

.child {
   position:relative;
   left:50%;
   margin-left:-250px;
}
<div class="parent">
  <span class="child" style="float: left;width: 500px;">我是要居中的浮動元素</span>
</div>
複製程式碼

②不定寬的浮動元素

通過父子容器都相對定位，偏移位移見下圖：

注意：要清除浮動，給外部元素加上float。這裡的父元素就是外部元素

<div class="box">
    <p>我是浮動的</p>
    <p>我也是居中的</p>
</div>
.box{
    float:left;
    position:relative;
    left:50%;
}
p{
    float:left;
    position:relative;
    right:50%;
}
複製程式碼

③通用辦法flex佈局(不管是定寬還是不定寬)

利用彈性佈局(flex)的justify-content屬性，實現水平居中。

.parent {
    display:flex;
    justify-content:center;
}
.chlid{
    float: left;
    width: 200px;//有無寬度不影響居中
}
<div class="parent">
  <span class="chlid">我是要居中的浮動元素</span>
</div>
複製程式碼

5.絕對定位元素水平居中

這種方式非常獨特，通過子元素絕對定位，外加margin: 0 auto來實現。

<div class="parent">
    <div class="child">讓絕對定位的元素水平居中對齊。</div>
</div>
  .parent{
        position:relative;
    }
   .child{
         position: absolute; /*絕對定位*/
         width: 200px;
         height:100px;
         background: yellow;
         margin: 0 auto; /*水平居中*/
         left: 0; /*此處不能省略，且為0*/
         right: 0;/*此處不能省略，且為0*/
    }
複製程式碼

二、垂直居中

1.單行內聯元素垂直居中

<div id="box">
     <span>單行內聯元素垂直居中。</span>。
</div>
<style>
 #box {
    height: 120px;
    line-height: 120px;
    border: 2px dashed #f69c55;
    }
</style>
複製程式碼

2.多行內聯元素垂直居中

①利用flex佈局（flex）

利用flex佈局實現垂直居中，其中flex-direction: column定義主軸方向為縱向。這種方式在較老的瀏覽器存在相容性問題。

<div class="parent">
    <p>Dance like nobody is watching, code like everybody is.    
    Dance like nobody is watching, code like everybody is.    
    Dance like nobody is watching, code like everybody is.</p>
</div>
<style>
    .parent { 
        height: 140px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border: 2px dashed #f69c55;
    }
</style>
複製程式碼

②利用表佈局（table）

利用表佈局的vertical-align: middle可以實現子元素的垂直居中

<div class="parent">
    <p class="child">The more technology you learn, the more you realize how little you know.
    The more technology you learn, the more you realize how little you know.
    The more technology you learn, the more you realize how little you know.</p>
</div>
 <style>
    .parent {
        display: table;
        height: 140px;
        border: 2px dashed #f69c55;
    }
    .child {
        display: table-cell;
        vertical-align: middle;
    }
</style>
複製程式碼

3 塊級元素垂直居中

①使用absolute+負margin(已知高度寬度)

通過絕對定位元素距離頂部50%，並設定margin-top向上偏移元素高度的一半，就可以實現了。

<div class="parent">
    <div class="child">固定高度的塊級元素垂直居中。</div>
</div>
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
}
複製程式碼

②使用absolute+transform

當垂直居中的元素的高度和寬度未知時，可以藉助CSS3中的transform屬性向Y軸反向偏移50%的方法實現垂直居中。但是部分瀏覽器存在相容性的問題。

<div class="parent">
    <div class="child">未知高度的塊級元素垂直居中。</div>
</div>
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
複製程式碼

③使用flex+align-items

通過設定flex佈局中的屬性align-items，使子元素垂直居中。

<div class="parent">
    <div class="child">未知高度的塊級元素垂直居中。</div>
</div>
.parent {
    display:flex;
    align-items:center;
}
複製程式碼

④使用table-cell+vertical-align

通過將父元素轉化為一個表格單元格顯示（類似 <td> 和 <th>），再通過設定 vertical-align屬性，使表格單元格內容垂直居中。

<div class="parent">
  <div class="child">Demo</div>
</div>
<style>
  .parent {
    display: table-cell;
    vertical-align: middle;
  }
</style>
複製程式碼

三、水平垂直居中

這種情形也是有多種實現方式，接下去我們娓娓道來：

方法1：絕對定位與負邊距實現（已知高度寬度）

這種方式需要知道被垂直居中元素的高和寬，才能計算出margin值，相容所有瀏覽器。

// css部分
 #container {
      position: relative;
    }
 #center {
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -50px 0 0 -50px;
    }
複製程式碼

// html部分(這部分不做變化,下面例子直接共用)
<body>
  <div id='container'>
    <div id='center' style="width: 100px;height: 100px;background-color: #666">center</div>
  </div>
</body>
複製程式碼

方法2：絕對定位與margin:auto（已知高度寬度）

這種方式無需知道被垂直居中元素的高和寬，但不能相容低版本的IE瀏覽器。

 #container {
      position: relative;
      height:100px;//必須有個高度
    }
 #center {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;//注意此處的寫法
    }
複製程式碼

方法3：絕對定位+CSS3(未知元素的高寬)

利用Css3的transform，可以輕鬆的在未知元素的高寬的情況下實現元素的垂直居中。 CSS3的transform固然好用，但在專案的實際運用中必須考慮相容問題，大量的hack程式碼可能會導致得不償失。

  #container {
      position: relative;
    }
  #center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
複製程式碼

方法4：flex佈局

利用flex佈局，其中justify-content 用於設定或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式；而align-items屬性定義flex子項在flex容器的當前行的側軸（縱軸）方向上的對齊方式。不能相容低版本的IE瀏覽器。

   #container {//直接在父容器設定即可
      height: 100vh;//必須有高度
      display: flex;
      justify-content: center;
      align-items: center;
    }
複製程式碼

方法5：flex/grid與margin:auto(最簡單寫法)

容器元素設為 flex 佈局或是grid佈局，子元素只要寫 margin: auto 即可,不能相容低版本的IE瀏覽器。

  #container {
      height: 100vh;//必須有高度
      display: grid;
    }
  #center {
      margin: auto;
    }
複製程式碼

如果覺得文章對你有些許幫助，歡迎在我的GitHub部落格點贊和關注，感激不盡！

後記

寫部落格是件挺費精力的事，特別是你有想寫出一篇好部落格的初衷,本文前後花了不止五六個小時，但我卻常常樂此不疲！一方面是看了很多部落格，自己不手動敲一遍整理一遍，就感覺沒掌握一樣;另一方面，分享學習心得是件很快樂的事，願與諸君共同成長進步！如果覺得本文還不錯，記得點贊關注喔！因為往往是普通人才最需要別人的鼓勵和支援！

css 元素左右居中總結
2019-04-07
CSS
如何實現一個簡易版的 Spring - 如何實現 AOP（終結篇）
2021-06-13
Spring
好程式設計師分享居中一個float元素
2019-04-22
程式設計師
css--元素居中常用方法總結
2021-11-13
CSS
元素水平居中，垂直居中方法
2018-11-25
讓一個元素水平垂直居中，到底有多少種方案？
2020-10-15
元素垂直水平居中
2018-06-07
讓一個元素在網頁上跟隨網頁視窗大小變化始終保持上下左右居中
2024-04-18
網頁
div垂直居中-CSS元素垂直居中方法
2018-11-01
CSS
不定寬度下，元素的垂直居中，水平居中
2018-09-07
元素水平垂直居中（僅做自我總結,侵權刪）
2018-09-14
CSS元素居中常用方法
2019-02-27
CSS
元素自適應水平垂直居中
2018-11-29
CSS 文字li元素中垂直居中
2020-02-13
CSS
如何實現婚戀app原始碼中元素水平垂直居中？
2021-10-20
APP原始碼
CSS 技巧篇(七)：設定元素居中
2019-02-26
CSS
網頁元素居中的n種方法
2020-06-15
網頁
CSS居中對齊終極指南
2021-07-26
CSS
jquery如何獲取第一個或最後一個子元素？
2018-03-28
jQuery
如何判斷一個元素文字是否換行？
2024-12-04
一起搞懂 CSS 水平居中與垂直居中的16個方法
2019-03-18
CSS
CSS實現元素居中原理解析
2018-10-12
CSS
absolute定位css元素居中的兩種方法
2020-11-27
CSS
2018年終總結—努力做一個有趣的人
2018-12-29
CSS元素（文字、圖片）水平垂直居中方法
2018-12-01
CSS
元素水平垂直居中三種方法實現
2018-06-21
直播系統app原始碼，元素水平垂直居中
2022-12-29
APP原始碼
css中居中總結
2018-09-12
CSS
如何判斷一個元素是否在可視區域中？
2024-05-27
在一個元素上:hover，改變另一個元素的css屬性
2018-11-06
CSS
【css系列】六種實現元素水平居中方法
2019-07-23
CSS
web前端技術分享之頁面元素水平居中
2021-04-15
Web前端
如何"優雅"地終止一個執行緒？
2018-05-03
執行緒
CSS 佈局解決方案（終結版)
2018-03-20
CSS
知行學院總結 | 如何打造一個企業級 Kubernetes 發行版
2019-03-12
如何判斷一個元素在億級資料中是否存在？
2019-01-16
如何用python輸出每10個一行的元素
2020-11-05
Python
如何在億級資料中判斷一個元素是否存在？
2020-04-19