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

時間 2019-11-05

標籤如何居中一個元素終結简体版

原文原文鏈接

前言

本文主要介紹水平居中，垂直居中，還有水平垂直居中各類辦法，思惟導圖以下：css

如需本文的思惟導圖，請猛戳Github我的博客

1、水平居中

1.行內元素水平居中

利用 text-align: center 能夠實如今塊級元素內部的行內元素水平居中。此方法對inline、inline-block、inline-table和inline-flex元素水平居中都有效。html

.parent{
        text-align:center;//在父容器設置
    }
複製代碼

此外，若是塊級元素內部包着也是一個塊級元素，咱們能夠先將其由塊級元素改變爲行內塊元素，再經過設置行內塊元素居中以達到水平居中。css3

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

2.塊級元素的水平居中

這種情形能夠有多種實現方式，下面咱們詳細介紹:git

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

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

②使用table+margin

先將子元素設置爲塊級表格來顯示（相似），再將其設置水平居中github

display:table在表現上相似block元素，可是寬度爲內容寬。segmentfault

<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內容，兼容性存在必定問題，高版本瀏覽器須要添加一些前綴。bash

④使用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*/
    }
複製代碼

2、垂直居中

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>
複製代碼

3、水平垂直居中

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

方法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博客點贊和關注，感激涕零！

後記

寫博客是件挺費精力的事，特別是你有想寫出一篇好博客的初衷,本文先後花了不止五六個小時，但我卻經常樂此不疲！一方面是看了不少博客，本身不手動敲一遍整理一遍，就感受沒掌握同樣;另外一方面，分享學習心得是件很快樂的事，願與諸君共同成長進步！若是以爲本文還不錯，記得點贊關注喔！由於每每是普通人才最須要別人的鼓勵和支持！