我們在網頁布局的時候，經常會碰到需要居中的情況，那下面就來講一下有哪幾種目前比較常用的居中方案，它們的優點和缺點分別又是什么。
一、水平居中
方法①：（父元素）text-align，（子元素）inline-block
這個是比較傳統的做法，而且代碼量也相對比較少，它的特點是可以很好地兼容IE6等低版本瀏覽器。至於缺點也比較明顯，是需要把父元素和子元素都做成一個整體，並且上同時設置CSS
總結：
優點：兼容性好，支持低版本瀏覽器
缺點：需要同時在父元素和子元素上設置
適用場景：子元素數量少（或只有一個），並且需要兼容低版本瀏覽器時使用
方法②：（子元素）
display:table;
margin:auto;（左右auto即可）
例：display:table; margin: 0 auto
這個方法利用display:table這個樣式把子元素轉化成類表格元素，從而可以用margin:auto來自動居中。方案的優點是只需要在子元素上加CSS，但display:table在IE8以上瀏覽器才有效果，所以本方法只適合用在較高版本瀏覽器中。
總結：
優點：只需要在子元素設置。
缺點：不兼容IE6和IE7
適用場景：子元素數量多，不方便修改父元素的屬性，對瀏覽器版本要求相對較低時使用
方法③：（父元素）position:relative，（子元素）absolute+left+transform（translateX(-50%)）
這個的方法看起來就比較現代化了。沒錯，它的核心是利用了CSS3里的水平偏移，由於設置了absolute，所以對其他元素基本不會造成影響
優點：不影響其他元素
缺點，transform兼容性
方法④：flex+justify-content/margin
這個方法利用了display:flex對Grid操作的強大，分別有兩種設置方法。
一種是（父元素）display:flex;justify-content:center;
優點：只設parent
缺點：flex兼容性差，而且比較耗資源
另一種是（父元素）display:flex;（子元素）margin:0 auto;
優點：代碼簡單
缺點，污染父元素，flex兼容性問題
水平居中這里的4種方法應該可以幫大家對應掉工作中絕大多數情況。下面我們來說說垂直居中
二、垂直居中：
①（父）table-cell + vertical-align
優點：兼容性比較好，換成table可以兼容IE6,7
缺點：table-cel會不能和float、position:absolute同時設置。（只能在外parent外套一層div.wrap才能設置float）
②（父）position:relative；（子）absolute +top+ transform
這個方法和水平居中的left+transform類似，這里就不再贅述了
優點：基本只設置子元素，不影響其他元素
缺點：transform
兼容性問題
③（父）flex + align-items
方法和水平居中的flex很類似吧
優點：只要設置parent
缺點：flex和align-items的兼容性
三、【終極需求】水平垂直同時居中！
下面來講講這個小BOSS
我們對水平居中和垂直居中的情況思考一下就會知道，要想達到水平垂直都居中，子元素必須是獨立的，而父元素的垂直和水平樣式互不影響。
方法①：（父）text-align + table-cell + vertical-align，（子）inline-block（兼容性方案）
方法②：（子）absolute + transform（不影響父元素方案，不兼容）
方法③：（父）flex + justify - content + align - items（不影響子元素方案，不兼容）
