CSS水平和垂直居中方案

我们在网页布局的时候，经常会碰到需要居中的情况，那下面就来讲一下有哪几种目前比较常用的居中方案，它们的优点和缺点分别又是什么。

一、水平居中

 

方法①：（父元素）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（不影响子元素方案，不兼容）