定义css样式水平居中对齐,css解决水平垂直居中对齐-样式解决方案仓库

前端工程师必备样式解决方案之css解决水平垂直居中对齐。大家肯定之前在网上收集到很多水平垂直居中的方法，今天我把这几种常见的方法列出来，看看这些方法各自的优缺点。

解决方法从前辈们那学来的，我只是将它们整理。而且将现代浏览器下的居中方法，为了支持IE6、IE7下的hack两者最优的hack方法结合。

方法1——利用line-height

[原理]我们知道只要将 line-height 和 height 两个值设置相等，如果需要居中的是img元素，再给其加上vertical-align:middle;。

但是IE6下img标签不支持，所以我们还得给它专门设置writing-mode:tb-rl文档流从下到下，从右到左(就是古书上的书写顺序)，最后设置vertical-align: middle就可以实现IE6下img垂直方向上的居中对齐了。代码如下：

.minddle-static{width:500px;height:200px;line-height:200px;overflow:hidden;border:1pxsolid#ccc;text-align:center;}.minddle-staticimg{vertical-align:middle;border:1pxsolid#ccc;}

DEMO如下

line-height方法的css代码和DEMO

优点：同时支持块级和内联极元素；代码简短。

缺点：只能显示一行(这里为了让IE6下也支持img增加了hack，如果不是让img居中可以去掉)。

注意：不是显示图片就把hack都去掉，writing-mode: tb-rl;也去掉。

方法2——利用table-cell，IE6，7绝对定位

[原理] 我们知道 table 里只要添加text-algin:center;vertical-align:middle;不管是内联还是块级元素统统都能垂直水平居中。

所以我们用div来模拟table效果，设置div的display:table-cell,为了更好的语义，我们将table-cell的父元素显示形式设置为table。不过在ie7以下浏览器不支持display:table-cell属性，所以专门我们还得为它们设置hack。代码如下：

.minddle-parent{display:table;width:500px;height:200px;border:1pxsolid#ddd;*position:relative;}.minddle-parent.table-cell{display:table-cell;text-align:center;vertical-align:middle;*position:absolute;/*容器a目的是自己的左上角与父容器中心点对齐*/*left:50%;*top:50%;}.minddle-parent.table-cell.pos{*position:relative;/*图片设置负值是使自己的中心点与父容器的中心点重合，最终达到居中的目的*/*left:-50%;*top:-50%;}

DEMO如下

display:table-cell方法的css代码和DEMO

优点：跟第一种方法比，不受行数限制，也不受元素父元素或者子元素的束缚，灵活，方便。

缺点：因为IE6-7不支持display:table-cell，所以使用了大量的hack,而且必须有3个元素，不然不能定位。

注意：如果不是为了img垂直居中，可以那么多莫名其妙的hack，这里只是为了图片让居中，图片肯定会有a标签包围，所以display:table-cell我觉得搭配绝对定位比较好。不过情况不同解决方法也可以变通…..

方法3——利用inline-block

dispaly:inline-block就是让对象显示呈递为内联元素但是对象里的内容作为块对象呈递，深入了解请点击怪飞，他的那篇文章介绍的很详细了。

从他那回来，我们继续。dispaly:inline-block跟dispaly:table-cell有些相似，例如对内部元素的包裹性，但是他们最大的不同就是没有父元素的匿名包裹特性，这使得其使用非常自由，可与文字，图片混排，可内嵌block属性元素，可以置身于inline元素中。可谓左右逢源。同时还要加一个元素，设高度值为100%。不过，IE7、IE6一如既往的不支持dispaly:inline-block，不过看了刚才怪飞的文章大家应该知道怎么解决了吧。那我们直接上代码

.minddle-warp{width:500px;height:200px;/*定义高度，让线盒型div#extra有一个参照物，可以是固定值，也可以是百分比*/border:1pxsolid#ddd;text-align:center;}.minddle-warp#center,.minddle-warp b {display:inline-block;/*把元素转为行内块显示*/vertical-align:middle;/*垂直居中*/*display:inline;*zoom:1;}.minddle-warp b{height:100%;/*设置线盒型为父元素的100%高度*/}

DEMO如下