摘要：源代碼演示利用將要水平排列的塊狀元素設(shè)為，然后在父級(jí)元素上設(shè)置，達(dá)到與上面的行內(nèi)元素的水平居中一樣的效果。

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

如需本文的思維導(dǎo)圖，請(qǐng)猛戳Github個(gè)人博客

利用 text-align: center 可以實(shí)現(xiàn)在塊級(jí)元素內(nèi)部的行內(nèi)元素水平居中。此方法對(duì)inline、inline-block、inline-table和inline-flex元素水平居中都有效。

   .parent{
        text-align:center;//在父容器設(shè)置
    }

此外，如果塊級(jí)元素內(nèi)部包著也是一個(gè)塊級(jí)元素，我們可以先將其由塊級(jí)元素改變?yōu)樾袃?nèi)塊元素，再通過(guò)設(shè)置行內(nèi)塊元素居中以達(dá)到水平居中。

  
Demo

這種情形可以有多種實(shí)現(xiàn)方式，下面我們?cè)敿?xì)介紹:

.child{
    width: 100px;//確保該塊級(jí)元素定寬
    margin:0 auto;
}

先將子元素設(shè)置為塊級(jí)表格來(lái)顯示（類似），再將其設(shè)置水平居中

display:table在表現(xiàn)上類似block元素，但是寬度為內(nèi)容寬。

  
Demo

先將父元素設(shè)置為相對(duì)定位，再將子元素設(shè)置為絕對(duì)定位，向右移動(dòng)子元素，移動(dòng)距離為父容器的一半，最后通過(guò)向左移動(dòng)子元素的一半寬度以達(dá)到水平居中。

  
Demo

不過(guò)transform屬于css3內(nèi)容，兼容性存在一定問(wèn)題，高版本瀏覽器需要添加一些前綴。

通過(guò)CSS3中的布局利器flex中的justify-content屬性來(lái)達(dá)到水平居中。

  
Demo

通過(guò)flex將父容器設(shè)置為為Flex布局，再設(shè)置子元素居中。

  
Demo

利用彈性布局(flex)，實(shí)現(xiàn)水平居中，其中justify-content 用于設(shè)置彈性盒子元素在主軸（默認(rèn)橫軸）方向上的對(duì)齊方式，本例中設(shè)置子元素水平居中顯示。

 #container {
    display: flex;
    justify-content: center;
}

源代碼演示

將要水平排列的塊狀元素設(shè)為display:inline-block，然后在父級(jí)元素上設(shè)置text-align:center，達(dá)到與上面的行內(nèi)元素的水平居中一樣的效果。

.container {
text-align: center;
}
.inline-block {
display: inline-block;
}

源代碼演示

對(duì)于定寬的浮動(dòng)元素，通過(guò)子元素設(shè)置relative + 負(fù)margin

對(duì)于不定寬的浮動(dòng)元素，父子容器都用相對(duì)定位

通用方法(不管是定寬還是不定寬)：flex布局

通過(guò)子元素設(shè)置relative + 負(fù)margin,原理見(jiàn)下圖：

注意：樣式設(shè)置在浮動(dòng)元素本身

.child {
   position:relative;
   left:50%;
   margin-left:-250px;
}

  我是要居中的浮動(dòng)元素

通過(guò)父子容器都相對(duì)定位，偏移位移見(jiàn)下圖：

注意：要清除浮動(dòng)，給外部元素加上float。這里的父元素就是外部元素

    
我是浮動(dòng)的
    
我也是居中的

.box{
    float:left;
    position:relative;
    left:50%;
}
p{
    float:left;
    position:relative;
    right:50%;
}

利用彈性布局(flex)的justify-content屬性，實(shí)現(xiàn)水平居中。

.parent {
    display:flex;
    justify-content:center;
}
.chlid{
    float: left;
    width: 200px;//有無(wú)寬度不影響居中
}

  我是要居中的浮動(dòng)元素

這種方式非常獨(dú)特，通過(guò)子元素絕對(duì)定位，外加margin: 0 auto來(lái)實(shí)現(xiàn)。

    
讓絕對(duì)定位的元素水平居中對(duì)齊。

  .parent{
        position:relative;
    }
   .child{
         position: absolute; /*絕對(duì)定位*/
         width: 200px;
         height:100px;
         background: yellow;
         margin: 0 auto; /*水平居中*/
         left: 0; /*此處不能省略，且為0*/
         right: 0;/*此處不能省略，且為0*/
    }

     單行內(nèi)聯(lián)元素垂直居中。。

利用flex布局實(shí)現(xiàn)垂直居中，其中flex-direction: column定義主軸方向?yàn)榭v向。這種方式在較老的瀏覽器存在兼容性問(wèn)題。

    
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.

利用表布局的vertical-align: middle可以實(shí)現(xiàn)子元素的垂直居中

    
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.

 

通過(guò)絕對(duì)定位元素距離頂部50%，并設(shè)置margin-top向上偏移元素高度的一半，就可以實(shí)現(xiàn)了。

    
固定高度的塊級(jí)元素垂直居中。

.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
}

當(dāng)垂直居中的元素的高度和寬度未知時(shí)，可以借助CSS3中的transform屬性向Y軸反向偏移50%的方法實(shí)現(xiàn)垂直居中。但是部分瀏覽器存在兼容性的問(wèn)題。

    
未知高度的塊級(jí)元素垂直居中。

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

通過(guò)設(shè)置flex布局中的屬性align-items，使子元素垂直居中。

    
未知高度的塊級(jí)元素垂直居中。

.parent {
    display:flex;
    align-items:center;
}

通過(guò)將父元素轉(zhuǎn)化為一個(gè)表格單元格顯示（類似 和 ），再通過(guò)設(shè)置 vertical-align屬性，使表格單元格內(nèi)容垂直居中。

  
Demo

這種情形也是有多種實(shí)現(xiàn)方式，接下去我們娓娓道來(lái)：

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

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

// html部分(這部分不做變化,下面例子直接共用)

  

    
center
  

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

 #container {
      position: relative;
      height:100px;//必須有個(gè)高度
    }
 #center {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;//注意此處的寫法
    }

利用Css3的transform，可以輕松的在未知元素的高寬的情況下實(shí)現(xiàn)元素的垂直居中。
CSS3的transform固然好用，但在項(xiàng)目的實(shí)際運(yùn)用中必須考慮兼容問(wèn)題，大量的hack代碼可能會(huì)導(dǎo)致得不償失。

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

利用flex布局，其中justify-content 用于設(shè)置或檢索彈性盒子元素在主軸（橫軸）方向上的對(duì)齊方式；而align-items屬性定義flex子項(xiàng)在flex容器的當(dāng)前行的側(cè)軸（縱軸）方向上的對(duì)齊方式。不能兼容低版本的IE瀏覽器。

   #container {//直接在父容器設(shè)置即可
      height: 100vh;//必須有高度
      display: flex;
      justify-content: center;
      align-items: center;
    }

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

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

如果覺(jué)得文章對(duì)你有些許幫助，歡迎在我的GitHub博客點(diǎn)贊和關(guān)注，感激不盡！

寫博客是件挺費(fèi)精力的事，特別是你有想寫出一篇好博客的初衷,本文前后花了不止五六個(gè)小時(shí)，但我卻常常樂(lè)此不疲！一方面是看了很多博客，自己不手動(dòng)敲一遍整理一遍，就感覺(jué)沒(méi)掌握一樣;另一方面，分享學(xué)習(xí)心得是件很快樂(lè)的事，愿與諸君共同成長(zhǎng)進(jìn)步！如果覺(jué)得本文還不錯(cuò)，記得點(diǎn)贊關(guān)注喔！因?yàn)橥瞧胀ㄈ瞬抛钚枰獎(jiǎng)e人的鼓勵(lì)和支持！