我们在网页布局的时候，经常会碰到需要居中的情况，那下面就来讲一下有哪几种目前比较常用的居中方案，它们的优点和缺点分别又是什么。
一、水平居中
方法①：（父元素）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（不影响子元素方案，不兼容）
