摘要：如果要居中的塊級(jí)元素直接是內(nèi)聯(lián)元素等，直接在其父級(jí)元素上加上屬性即可圖片之間，瀏覽器會(huì)產(chǎn)生默認(rèn)的間距，父元素設(shè)置可以很好地解決這個(gè)問(wèn)題。使用水平居中前提居中的元素必須是塊級(jí)元素，如果是內(nèi)聯(lián)元素，需要添加屬性而且元素不浮動(dòng)。

前端開(kāi)發(fā)中，我們經(jīng)常需要對(duì)元素進(jìn)行水平垂直居中。為此，小編特地總結(jié)了讓元素居中的方法。

這個(gè)是沒(méi)有浮動(dòng)的情況下，我們可以先將要居中的塊級(jí)元素設(shè)為inline/inline-block，然后在其父元素上加上屬性text-align:center;即可。如果要居中的塊級(jí)元素直接是內(nèi)聯(lián)元素（span、img、a等），直接在其父級(jí)元素上加上屬性text-align:center;即可；

.way {
    border: 1px solid red;
    width: 250px;
}

.way img {
    max-width: 200px;
}

.way1 {
    text-align: center;
    font-size: 0px;
    //HTML圖片之間，瀏覽器會(huì)產(chǎn)生默認(rèn)的間距，父元素設(shè)置font-size：0px;可以很好地解決這個(gè)問(wèn)題。
}

   

      
  

前提：居中的元素必須是塊級(jí)元素，如果是內(nèi)聯(lián)元素，需要添加屬性display:block;而且元素不浮動(dòng)。

.way2 img {
    display: block;
    margin: 0 auto;
}


  

前提：必須知道設(shè)置要居中元素的寬高

.way3 {
    position: relative;
    width: 250px;
    height: 250px;
}

.way3 img {
    width: 200px;
    height: 140px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -100px;
    margin-top: -70px;
}

這種方法的好處是不需要知道元素的寬高，而且瀏覽器的兼容性好。

.way4 {
    position: relative;
    width: 250px;
    height: 250px;
}

.way4 img {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

該方法的優(yōu)點(diǎn)是不需要知道元素的寬度和高度，在移動(dòng)端用的比較多，因?yàn)橐苿?dòng)端對(duì)css3新屬性的兼容性比較好。

.way5 {
    position: relative;
    width: 250px;
    height: 250px;
}

.way5 img {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

用于動(dòng)態(tài)計(jì)算長(zhǎng)度值。

需要注意的是，運(yùn)算符前后都需要保留一個(gè)空格，例如：width: calc(100% - 10px)；

任何長(zhǎng)度值都可以使用calc()函數(shù)進(jìn)行計(jì)算；

calc()函數(shù)支持 "+", "-", "*", "/" 運(yùn)算；

calc()函數(shù)使用標(biāo)準(zhǔn)的數(shù)學(xué)運(yùn)算優(yōu)先級(jí)規(guī)則；

.way6 {
    position: relative;
    width: 250px;
    height: 250px;
}

.way6 img {
    width: 200px;
    height: 140px;
    position: absolute;
    left: calc(50% - 100px);
    top: calc(50% - 70px);
}

jquery實(shí)現(xiàn)水平和垂直劇中的原理是通過(guò)jquery設(shè)置div的css，獲取div的左，上的邊距偏移量，邊距偏移量的算法就是用頁(yè)面窗口的寬度減去該div的寬度，得到的值再除以2即左偏移量，右偏移量算法相同。注意div的css設(shè)置要在resize（）方法中完成，就是每次改變窗口大小是，都要執(zhí)行設(shè)置div的css，代碼如下：

   $(function(){
          $(window).resize(function(){
            $(".mydiv").css({
              position:"absolute",
              left:($(window).width()-$(".mydiv").outerWidth())/2,
              top:($(window).height()-$(".mydiv").outerHeight())/2
            });
          });
      })

此方法的好處就是不需要知道div 的具體寬度和高度，直接用jquery就可以實(shí)現(xiàn)水平和垂直居中，并且兼容各種瀏覽器。這個(gè)方法在很多的彈出層效果中應(yīng)用。

使用flex居中不需要知道元素本身寬高以及元素的屬性。

.way7 {
    width: 250px;
    height: 250px;
    display: flex;
    justify-content: center;/*水平居中*/
    align-items: center;/*垂直居中*/
}

組合使用display:table-cell和vertical-align、text-align，使父元素內(nèi)的所有行內(nèi)元素水平垂直居中（內(nèi)部div設(shè)置display:inline-block即可）。這在子元素不確定寬高和數(shù)量時(shí)，特別實(shí)用！

.way8 {
    display: table-cell;
    width: 250px;
    height: 250px;
    text-align: center;
    vertical-align: middle;
    float: none;
}

.way8 img {
    display: inline-block;
}

特別提醒：

1.table-cell不感知margin，在父元素上設(shè)置table-row等屬性，也會(huì)使其不感知height。

2.設(shè)置float或position會(huì)對(duì)默認(rèn)布局造成破壞，可以考慮為之增加一個(gè)父div定義float等屬性。