摘要：前言最近看到很多面試題目會(huì)問請(qǐng)說出幾種使用完成垂直水平居中的方法正好看基礎(chǔ)的時(shí)候看到一篇文章是講完全居中的，這邊對(duì)于文章中的內(nèi)容做個(gè)小結(jié)。具體代碼如下使用完成垂直水平居中該方法的核心思想是使用表格來實(shí)現(xiàn)垂直居中，再使用來實(shí)現(xiàn)水平居中。

前言：
最近看到很多面試題目會(huì)問：請(qǐng)說出幾種使用css完成垂直水平居中的方法？正好看css基礎(chǔ)的時(shí)候看到一篇文章是講完全居中的，這邊對(duì)于文章中的內(nèi)容做個(gè)小結(jié)。

.container {
    position: relative;
}

.absolute_center {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 50%;
    height: 50%;
    margin: auto;
    padding: 20px;
    overflow: auto;
}

    

        

            

                該方法的核心思想是是使用絕對(duì)定位布局，使當(dāng)前元素脫離正常的流體特性，而使用absolute的流體特性
            
        
    

使用absolute進(jìn)行定位布局，脫離正常的塊狀元素流體特性，而通過absolute的流體特性完成垂直水平居中。

這里有兩個(gè)基本知識(shí)點(diǎn)需要知道：

1.流體特性：
塊狀水平元素，如div元素，在默認(rèn)情況下（非浮動(dòng)、絕對(duì)定位等），水平方向會(huì)自動(dòng)填滿外部的容器；如果有margin-left/margin-right, padding-left/padding-right, border-left-width/border-right-width等，實(shí)際內(nèi)容區(qū)域會(huì)響應(yīng)變窄；

2.absolute流體特性：
默認(rèn)是不具有流體特性的，而是在特定條件下才具有，而這個(gè)條件就是"對(duì)立方向同時(shí)發(fā)生定位的時(shí)候"，即left與right為水平方向定位，top與bottom為垂直方向定位，而當(dāng)對(duì)立方向同時(shí)具有定位數(shù)值的時(shí)候，absolute的流體特性就發(fā)生了。

優(yōu)：
1.兼容性好，absolute流體特性IE7就兼容了，可兼容所有現(xiàn)代瀏覽器；
2.沒有額外的標(biāo)記html元素，樣式簡(jiǎn)單；
3.內(nèi)容的寬度以及高度寫法支持使用百分比以及min-/max-寫法；
4.對(duì)圖像文件也同樣支持；

缺：
1.必須定義內(nèi)容的高度；
2.必須增加overflow屬性來阻止如果內(nèi)容的文本高度超出外層容器時(shí)出現(xiàn)的溢出情況；

這可能是目前最常用的方法，在元素的高度以及寬度是固定數(shù)值的時(shí)候，通過設(shè)置該元素為相對(duì)布局脫離文檔流，并設(shè)置top: 50%; left: 50%;，使用margin-left以及margin-top使元素完全居中。

.container {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: aliceblue;
}

.is-Negative {
    position: absolute;
    width: 300px;
    height: 200px;
    padding: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -170px;
    margin-top: -120px;
    background-color: cornsilk;
}

使用相對(duì)布局，并使用top以及l(fā)eft使內(nèi)容置于容器中心部位，再使用margin來控制偏移量。

這里有有個(gè)注意點(diǎn)：

當(dāng)使用box-sizing:border-box屬性的時(shí)候，偏移量是不需要計(jì)算border以及padding的。

優(yōu)：
1.兼容性好，包括IE6-IE7
2.沒有額外的標(biāo)記html元素，代碼量少；

缺：
1.非響應(yīng)式的，不能配合百分比以及min-/max-使用；
2.必須增加overflow屬性來阻止如果內(nèi)容的文本高度超出外層容器時(shí)出現(xiàn)的溢出情況；
3.當(dāng)元素使用box-sizing:border-box和使用默認(rèn)的content-box偏移量是不一樣的，需要重新計(jì)算；

.container {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: aliceblue;
}

.is-Transformed { 
    width: 50%;
    margin: auto;
    position: absolute;
    top: 50%; 
    left: 50%;
    padding: 20px;
    -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
    background-color: darkseagreen;
}

    

        

            

                該方法的核心思想是使用相對(duì)布局，并使用top以及l(fā)eft使內(nèi)容置于容器中心部位，再使用translate來控制偏移量
            
        
    

使用相對(duì)布局，并使用top以及l(fā)eft使內(nèi)容置于容器中心部位，再使用transform來控制偏移量。

優(yōu)：
1.內(nèi)容寬度以及高度自適應(yīng)，可以不指定內(nèi)容的寬度以及高度;
2.代碼量少

缺：
1.兼容性差了點(diǎn)，由于transform不兼容IE8,所以只支持IE9及其以上的現(xiàn)代瀏覽器；
2.為了兼容各種瀏覽器，需要些額外的css前綴；
3.如果元素有使用transform屬性，可能會(huì)影響到其他的變換效果；
4.在有些時(shí)候會(huì)出現(xiàn)邊緣模糊的情況，這是瀏覽器渲染的問題，尤其是使用了transform-style: preserve-3d屬性的時(shí)候

這可能是最好的垂直居中的方案，但存在一個(gè)最大的問題，需要額外的html元素，要使用table-cell完成垂直居中效果需要3個(gè)元素來完成。

.container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: aliceblue;
}

.container.is-Table { 
  display: table; 
}

.is-Table .Table-Cell {
  display: table-cell;
  vertical-align: middle;
}

.is-Table .Center-Block {
  width: 50%;
  margin: 0 auto;
  padding: 20px;
  background-color: deepskyblue;
}

    

        

            使用table-cell完成垂直水平居中
        
    

@import "./absolute_center4.png"{width="50%"}

使用表格來實(shí)現(xiàn)垂直居中，再使用margin: 0 auto;來實(shí)現(xiàn)水平居中。

具體操作步驟如下：
1.設(shè)置父元素為塊級(jí)表格；
2.設(shè)置子元素為表格單元格；
3.給子元素添加vertical-align:middle屬性,此單元格已實(shí)現(xiàn)垂直居中；
4.設(shè)置子元素中的內(nèi)容的寬度，添加margin: 0 auto;屬性，使子元素水平居中。

優(yōu)：
1.內(nèi)容高度自適應(yīng)；
2.如果子元素的內(nèi)容溢出，會(huì)拉伸父元素的高度；
3.兼容性好，兼容到IE8；

缺：
1.完成一個(gè)垂直居中效果，需要3個(gè)html元素；

這也是一種常用的垂直水平居中的方法，但會(huì)存在一個(gè)問題：當(dāng)內(nèi)容的寬度大于容器寬度-0.25em的時(shí)候，會(huì)發(fā)生內(nèi)容上移到頂部的方法，所以需要一些小的技巧來避免這樣的問題。

.container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: aliceblue;
}

.container.is-Inline { 
  text-align: center;
  overflow: auto;
}

.container.is-Inline:after,
.is-Inline .Center-Block {
  display: inline-block;
  vertical-align: middle;
}

.container.is-Inline:after {
  content: "";
  height: 100%;
  margin-left: -0.25em; /* To offset spacing. May vary by font */
}

.is-Inline .Center-Block {
  background-color: greenyellow;
  padding: 20px;
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
  /* max-width: calc(100% - 0.25em) /* Only for IE9+ */ 
}

    

        使用inline-block完成水平垂直居中
    

和table有點(diǎn)類似，設(shè)置內(nèi)容為inline-block塊，設(shè)置vertical-align: middle;屬性使元素垂直方向居中，再父容器設(shè)置text-align:center;使子元素水平方向居中；

優(yōu)：
1.內(nèi)容高度自適應(yīng)；
2.如果子元素的內(nèi)容溢出，會(huì)拉伸父元素的高度；
3.兼容性好，兼容到IE7；

缺：
1.依賴margin-left：-0.25em來矯正水平方向居中的誤差；
2.內(nèi)容的寬度必須小于容器的寬度減去0.25em。

彈性布局是當(dāng)前移動(dòng)端比較流行的布局方式，它可以很優(yōu)雅的完成垂直水平居中效果。

.container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: aliceblue;
}

.container.is-Flexbox {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
      -moz-box-align: center;
      -ms-flex-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
      -moz-box-pack: center;
      -ms-flex-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
}

.center_block {
  background-color: wheat;
  padding: 20px;
}

  

    使用flexbox完成水平垂直居中
  

使用彈性布局，align-items: center;使元素在側(cè)軸方向居中（默認(rèn)是垂直方向），justify-content: center;使元素在主軸方向居中（默認(rèn)是水平方向）;

優(yōu)：
1.內(nèi)容寬度、高度自適應(yīng),即便文本溢出也很優(yōu)雅；
2.可以使用很多彈性布局的新特性；

缺：
1.兼容性比較差，目前只有IE10以上兼容；
2.需要寫額外的兼容性前綴；
3.各個(gè)瀏覽器的表現(xiàn)可能會(huì)有一些差異；