?方法一（varticle-align）
理念
利用表格單元格的居中屬性。
步驟
父div外層配置一個div，同時設(shè)置為表格元素 (display: table)，寬度為100%
父div配置為表格單元格元素 (display: table-cell)
父div配置居中屬性（vertical-align: middle），使子div上下居中
子div通過margin配置左右居中（margin-left:auto; margin-right:auto）
例子
* {margin:0;padding:0;box-sizing: border-box;}
.table{display: table;width:100%;}
.father{display: table-cell;vertical-align: middle;}
.son{margin: auto;}
注：表格單元格比較特殊，如果只有一個單元格時，它的寬度默認會占父級（table|tr）寬度的100%;
table默認寬度不會撐開，需要手動配置width:100%；
?方法二（line-height）
理念
當父div的行高等于自身高度時，內(nèi)部的行內(nèi)元素會上下居中顯示。行內(nèi)塊沒有固定高度時也會上下居中顯示。通過文本居中屬性text-align:center,可以使內(nèi)部行內(nèi)元素或行內(nèi)塊元素左右居中顯示。
步驟
子div設(shè)定為行內(nèi)塊元素(display:inline-block)；
父div設(shè)置行高(line-height)使子div上下居中
父div設(shè)置文本居中(text-align:center)使子div左右居中。
例子
* {margin:0;padding:0;box-sizing: border-box;}
.father{line-height:500px;text-align: center;font-size:0;}
.son{display: inline-block;
/* display: inline-flex;
display: inline-grid;
display: inline-table; */
}
注： 行高如果設(shè)置為當前父div的高度(400px)的話，有固定高度的子div并不會居中顯示的，問題出在瀏覽器默認將其當做文本居中的，即把它當做了一段文本（chrome默認font-size:16px;hight:21px）進行居中，沒把它當做高度100px進行居中。所以需要對父div的line-height進行調(diào)整。以font-size:0（對應(yīng)的字體高度為0）為例子，則需要line-height增加一個子div的高度（400px + 100px;）。
順便給大家推薦一個裙，它的前面是 537，中間是631，最后就是 707。想要學(xué)習(xí)前端的小伙伴可以加入我們一起學(xué)習(xí)，互相幫助。群里每天晚上都有大神免費直播上課，如果不是想學(xué)習(xí)的小伙伴就不要加啦。（537631707）
?方法三（絕對定位）
理念利用定位屬性（top、left、right、bottom）百分比的模式。若為100%，則代表偏移的長度為父div的高度（寬度）的100%。
步驟
父div標記下定位（position:relative|absolute|fixed）;子div絕對定位（position:absolute）
子div上下居中：top:50%;margin-top:-h/2; 或是 bottom:50%;margin-bottom:-h/2;；
子div左右居中: left:50%;margin-left:-w/2 或是 right:50%;margin-right:-w/2；
例子
* {margin:0;padding:0;box-sizing: border-box;}
.father{position: relative;}
.son{position: absolute;bottom:50%;margin-bottom: -50px;left:50%;margin-left: -50px;
}
?方法四（絕對定位）
理念：
定位屬性top和bottom（或是left和right）值分別設(shè)置為0，但子div有固定高度（寬度），并不能達到上下（左右）間距為0，此時給子div設(shè)置margin:auto會使它居中顯示。
步驟：
父div標記下定位（position:relative|absolute|fixed|sticky）;子div絕對定位（position:absolute）
子div上下居中：top:0;bottom:0;margin-top:auto;margin-bottom:auto
子div左右居中：left:0;right:0;margin-left:auto;margin-right:auto
例子
* {margin:0;padding:0;box-sizing: border-box;}
.father{position: relative;}
.son{position: absolute;top:0;bottom:0;left:0;right:0;margin: auto}
?方法五（flex）
理念
彈性盒子中只要給彈性子元素設(shè)置 margin: auto; 可以使得彈性子元素上下左右居中。
例子
* {margin:0;padding:0;box-sizing: border-box;}
.father{display: flex;}
.son{margin: auto}
注：flex存在兼容性問題
?方法六（相對定位）
理念
利用定位屬性（top、left、right、bottom）百分比的模式。若為100%，則代表偏移的長度為父div的高度（寬度）的100%。
步驟
父div標記下定位（position:relative|absolute|fixed）;子div相對定位（position:relative）
子div上下居中：top:50%;margin-top:-h/2; 或是 bottom:-50%;margin-top:-h/2;；
子div左右居中: left:50%;margin-left:-w/2 或是 right:-50%;margin-left:-w/2；
例子
* {margin:0;padding:0;box-sizing: border-box;}
.father{position: relative;}
.son{position: relative;top:50%;margin-top:-50px;left:50%;margin-left:-50px}
注：
與絕對定位不同的是，定位屬性相對的點是自身元素的左上角。（所以bottom是負值，和方法三絕對定位寫法有不一樣的地方）
如果有同級元素，可能會受到影響。
如果子div是浮動元素，也有居中效果。
結(jié)尾
方法二和方法三兼容性要比其它好些。最簡單的是彈性盒子。
溫馨提示：文章素材來源于網(wǎng)絡(luò)，版權(quán)歸原作者所有！
