1、水平居中（寬度未知）
例：有兩個(gè)div啤握，大的div包裹著小的div，如何使小的div水平居中在大的div中？
解決方案：(1)inline-block + text-align
初始DEMO是塊級(jí)元素配乱，會(huì)充滿父元素；inline-block默認(rèn)寬度為內(nèi)容寬度
優(yōu)點(diǎn)：兼容性較好皮迟，甚至可以兼容IE6
缺點(diǎn)：子元素會(huì)繼承父元素的text-align搬泥，使子元素里的內(nèi)容也水平居中
解決方案(2)：table? +? margin
table在表現(xiàn)上非常相似block，但table元素的寬度跟著內(nèi)容走万栅，是內(nèi)容寬度
? 優(yōu)點(diǎn)：只需在子元素child上設(shè)置css樣式佑钾，不用關(guān)心父元素的
? 缺點(diǎn)：兼容性較差，如果需要兼容烦粒，更改html樣式休溶，改為table樣式
解決方案(3)：absolute ?+ ?transform
這是用絕對(duì)定位和偏移解決方案
left:50%; 將子元素距離左邊50%，translateX是將自身寬度往左偏移50%扰她；結(jié)果是水平居中
? 優(yōu)點(diǎn)：因?yàn)閜osition：absolute;脫離文檔流兽掰，所以不會(huì)影響其他的子元素；
? 缺點(diǎn)：transform是css3的內(nèi)容徒役，所以兼容性較差孽尽；
解決方案(4)：flex ?+ ?justify-content
? 優(yōu)點(diǎn)：只需設(shè)置父元素，不用設(shè)置子元素
? 缺點(diǎn)：flex也是css3的忧勿，兼容性較差
2杉女、垂直居中(高度未知)
例：有兩個(gè)div瞻讽，大的div包裹著小的div，如何使小的div垂直居中在大的div中熏挎？
解決方案1：table-cell ?+ ?vertical-align
display:table-cell屬性指讓標(biāo)簽元素以表格單元格的形式呈現(xiàn)速勇，類似于td標(biāo)簽。我們都知道坎拐，單元格有一些比較特別的屬性烦磁，例如元素的垂直居中對(duì)齊，關(guān)聯(lián)伸縮等哼勇，所以可以設(shè)置垂直居中
解決方案2：absolute? +? transform
css樣式同水平居中都伪，同樣適用定位和偏移解決垂直居中
解決方案3：flex ?+ ?align-items
設(shè)置display:flex;會(huì)使子元素充滿父元素。因?yàn)閍lign-items的值默認(rèn)為stretch积担。如：
父元素display:flex;樣式 ?再設(shè)置align-items:center;? 顯示為垂直居中
3陨晶、水平垂直居中(父容器和子容器寬度高度未知)
我們可以綜合水平居中和垂直居中一起
例：
（1）inline-block ?+ ?text-align ?+table-cell ?+vertical-align
（2）absolute ?+ ?transform
（3）flex ?+ ?justify-content ?+ ?align-items
總結(jié)：解決此類問題，我們需要了解css屬性的值和特性磅轻，了解屬性以后珍逸，對(duì)問題進(jìn)行分解，把特性和分解的問題進(jìn)行一些聯(lián)系聋溜，問題可以用那些特性實(shí)現(xiàn)谆膳，綜合解決
