前端工程师必备样式解决方案之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如下