總結：前端開發中讓元素居中的方法

時間 2019-12-10

標籤總結前端開發元素居中方法简体版

原文原文鏈接

注：前端開發中，讓元素居中是必不可少的步驟，下面就來總結下讓元素居中的方法。掌握了這些，可讓咱們在開發中事半功倍。css

1、text-align:cener;

前提：元素沒有浮動，並且是內聯元素（如：span、img、b）。若是是塊級元素，要把塊級元素設置成display:inline-block;或display:inline;前端

2、margin:auto;

前提：元素必須是塊級元素，若是是內聯元素，必須設置爲display:block;jquery

3、position:absolute;+定位(left:50%; top:50%;)+偏移(margin-left:-(w/2)px;margin-top:-(-h/2)px);

缺點：已知元素的寬、高，且需計算偏移值。css3

注意：偏移的方向是負方向。web

div {
    position: relative;
    width: 250px;
    height: 250px;
}

div img {
    width: 200px;
    height: 140px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -100px;
    margin-top: -70px;
}
複製代碼

4、position:absolute;+定位(left:50%; top:50%;)+transform:translate(-50%,-50%);

說明：該方法的優勢是不須要知道元素的寬度和高度，在移動端用的比較多，由於移動端對css3新屬性的兼容性比較好。算法

div {
    position: relative;
    width: 250px;
    height: 250px;
}

div 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%);
}
複製代碼

5、position:absolute;+定位（四個方向）+margin:auo;

優勢：不須要知道元素的寬、高，並且瀏覽器的兼容性好。瀏覽器

div {
    position: relative;
    width: 250px;
    height: 250px;
}

div img {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
複製代碼

6、display:flex;+justify-content:center;+align-items:center;(彈性佈局)

Flexbox佈局最適合應用程序的組件和小規模佈局，而 Gird 佈局則適用於較大規模的佈局。bash
設爲Flex佈局之後，子元素的float、clear和vertical-align屬性將失效函數
使用flex居中不須要知道元素自己寬高以及元素的屬性佈局

div {
    width: 250px;
    height: 250px;
    display: flex;
    justify-content: center;/*水平居中*/
    align-items: center;/*垂直居中*/
}
複製代碼

7、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就能夠實現水平和垂直居中，而且兼容各類瀏覽器。這個方法在不少的彈出層效果中應用。

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

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

div {
    position: relative;
    width: 250px;
    height: 250px;
}

div img {
    width: 200px;
    height: 140px;
    position: absolute;
    left: calc(50% - 100px);
    top: calc(50% - 70px);
}
複製代碼

9、display:table-cell;實現居中

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

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

div img {
    display: inline-block;
}
複製代碼