總結：前端開發中讓元素水平垂直居中的方法

前端開發中，咱們常常須要對元素進行水平垂直居中。爲此，小編特意總結了讓元素居中的方法。

水平居中text-align：center;

這個是沒有浮動的狀況下，咱們能夠先將要居中的塊級元素設爲inline/inline-block，而後在其父元素上加上屬性text-align:center;便可。若是要居中的塊級元素直接是內聯元素（span、img、a等），直接在其父級元素上加上屬性text-align:center;便可；

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

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

.way1 {
    text-align: center;
    font-size: 0px;
    //HTML圖片之間，瀏覽器會產生默認的間距，父元素設置font-size：0px;能夠很好地解決這個問題。
}

   <div class="way way1">
      <img src="fj.jpg" alt="">
  </div>

使用margin：0 auto;水平居中

前提：居中的元素必須是塊級元素，若是是內聯元素，須要添加屬性display:block;並且元素不浮動。

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

<div class="way way2">
  <img src="fj.jpg" alt="">
</div>

定位實現居中（需計算偏移值）

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

.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;
}

定位實現居中（不需計算偏移值，margin：auto;和四個方向定位搭配使用）

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

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

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

定位配合css3新屬性transform：translate（x,y）使用

該方法的優勢是不須要知道元素的寬度和高度，在移動端用的比較多，由於移動端對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%);
}

css3新屬性calc()和定位配合使用（須要知道元素的寬高）

• 用於動態計算長度值。
• 須要注意的是，運算符先後都須要保留一個空格，例如：width: calc(100% - 10px)；
• 任何長度值均可以使用calc()函數進行計算；
• calc()函數支持 "+", "-", "*", "/" 運算；
• calc()函數使用標準的數學運算優先級規則；

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

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

jquery實現水平垂直居中

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

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

此方法的好處就是不須要知道div 的具體寬度和高度，直接用jquery就能夠實現水平和垂直居中，而且兼容各類瀏覽器。這個方法在不少的彈出層效果中應用。

使用彈性佈局flex居中

使用flex居中不須要知道元素自己寬高以及元素的屬性。

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

使用display:table-cell;居中

組合使用display:table-cell和vertical-align、text-align，使父元素內的全部行內元素水平垂直居中（內部div設置display:inline-block便可）。這在子元素不肯定寬高和數量時，特別實用！

.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，在父元素上設置table-row等屬性，也會使其不感知height。
• 2.設置float或position會對默認佈局形成破壞，能夠考慮爲之增長一個父div定義float等屬性。