總結：讓元素居中的方法

一、text-align:center;

這個是沒有浮動的情況下，我們可以先將要居中的塊級元素設為inline/inline-block，然后在其父元素上加上屬性text-align:center;即可。如果要居中的塊級元素直接是內聯元素（span、img、a等），直接在其父級元素上加上屬性text-align:center;即可；

二、margin:0 auto;

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

三、絕對定位+偏移(已知寬高，需計算偏移值);

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

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

兼容性好; 缺點:必須知道元素的寬高

四、絕對定位(四個方向都為0)+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();

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

div img {
    position: absolute;
    left: 50%;
    top: 50%;
　　<!--設置元素的相對於自身的偏移度為負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新屬性的兼容性比較好。 缺點:兼容性不好，只支持IE9+的瀏覽器

六、彈性布局display:flex;

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

• Flexbox布局最適合應用程序的組件和小規模布局，而 Gird 布局則適用於較大規模的布局。
• 設為Flex布局以后，子元素的float、clear和vertical-align屬性將失效
• 使用flex居中不需要知道元素本身寬高以及元素的屬性

七、display:table;

實例：多行文本的垂直居中 主要實現代碼：

• display: table使塊狀元素成為一個塊級表格;
• display: table-cell;子元素設置成表格單元格;
• vertical-align: middle;使表格內容居中顯示，即可實現垂直居中的效果;

<div class="table">
    <div class="table-cell">
        近幾年隨着 jQuery、Ext 以及 CSS3 的發展，以 Bootstrap 為代表的前端開發框架如雨后春筍般擠入視野，可謂應接不暇。不論是桌面瀏覽器端還是移動端都涌現出很多優秀的框架，極大豐富了開發素材，也方便了大家的開發。
    </div>
</div>

.table{
    width: 400px;
    height: 400px;
    padding: 20px;
    border: 1px solid red;
    margin: 40px auto;
    display: table;
}
.table-cell{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

• display:table;此元素會作為塊級表格來顯示（類似 <table>），表格前后帶有換行符。
• display:table-cell;table-cell 此元素會作為一個表格單元格顯示（類似 <td> 和 <th>）

特別提醒

• 1.table-cell不感知margin，在父元素上設置table-row等屬性，也會使其不感知height。
• 2.設置float或position會對默認布局造成破壞，可以考慮為之增加一個父div定義float等屬性。

八、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就可以實現水平和垂直居中，並且兼容各種瀏覽器。這個方法在很多的彈出層效果中應用。

九、絕對定位+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);
}

十、Bootstrap前端框架方法居中

Bootstrap3居中方法

• 文本居中 class="text-center"
• 圖片居中 class="center-block"
• 其他元素 水平居中 利用bootstrap列偏移

<div class="col-lg-4 col-offset-4"></div>

Bootstrap4居中

• class="m-auto"

---

 

上面的居中方法是使整個元素居中，下面就來介紹下是元素內部居中的方法

bootstrap3 如何讓div內部垂直居中：

Bootstrap的柵格系統使用的是float:left的浮動方式，vertical-align屬性不起作用，故把內部div的float屬性清除，添加display屬性，如下：

.middle {
   float: none;
   display: inline-block;
   vertical-align: middle;
}

Bootstrap4 如何讓div內部垂直居中：

給元素高度

.login-center {
 height: 100vh;
}

應用.align-items-center可以使元素垂直居中：

<divclass="row align-items-center justify-content-center login-center">

</div>

同理，應用justify-content-center可以使元素水平居中。