css实现垂直居中

2014年06月23日

起因

流量GO第二版首页改进的时候遇到图片垂直居中的问题。自己是用margin这种方式解决的,但是当浏览器缩小及页面滚动的时候出现了一些意想不到的结果,然后被狠狠鄙视了一顿。解决问题的方法有很多种,要找最好的,还有,投机取巧的方法要不得(每一句代码都要心安理得啊!),代码只会越写越烂。。。

绝对定位和-webkit-box

//水平居中
position: absolute;
top :0;
left: 50%;
-webkit-transform: translate(-50%,0); //transform属性有rotate()旋转 / skew()倾斜 / scale()比例 /translate(,)位移 

//使用box-align和box-pack属性,居中div框的子元素垂直居中    	display: -moz-box;
display: -webkit-box;
display: -o-box;
display: box;
-ms-flex-align: center;
-moz-box-align: center;
-o-box-align: center;
-webkit-box-align: center;
align-items: center;
height: 100%; 但是在公司自己的流量充值页面搭建过程中,要求浏览器兼容到IE7,上面的垂直居中方案显然是不可行的。

浏览器支持 目前没有浏览器支持box-align属性。 Firefox支持替代的-moz-box-align属性。 Safari、Opera及Chrome支持替代的-webkit-box-align属性。

display: table

所以在那个项目中,实现垂直居中的方案是使用display:table

#outer {
   display:table;
   height:400px;
   #position:relative;
   overflow:hidden;
}
#middle {
   display:table-cell;
   vertical-align:middle;
   #position:absolute;
   #top:50%;
} 
#inner {
   #position:relative;
   #top:-50%;
}

<div id=”outer”>
	<div id=”middle”>
    	<div id=”inner”>
       		<!–这里是要垂直居中的内容–>
    	</div>
	</div>
</div>  

最大的问题:IE浏览器的Bug。 IE7及其以下的旧版IECSS中的display:table之类的表格方式声明 解决办法:让大部分能理解display:table声明的浏览器使用vertical-align属性达到垂直居中,让IE7及以下版本用自己理解高度的Bug来解决居中问题。

IE Bug:  IE7及以下版本理解高度的Bug:如果a容器内有b对象,a容器并没有设置高度值,如果b对象有实际内容(如文字),那么就会将a的高度理解为与b相等。那么如果对b采取相对定位,b就会相对于在a中的原始位置移动(主要利用百分比高度)。 eg:a未定义高度,b的高度为100px,将b相对定位,并设top:-50% 在这种情况下:标准浏览器由于未知a的高度,所以b不动。而IE7及以下版本则会让b相对a的高度(其实等于b的高度)上移50%,也就是50px。

hack

①在每个CSS属性前加一个下划线”_”,这个hack是专门针对IE6及以下版本的,也就是说IE7无法理解。如:_position:absolute; ②.在属性前加”#”的声明正好可以仅让IE7及以下版本理解,而其它任何浏览器都无法理解这个”#”,所以”#”后的声明就会被其它浏览器忽略掉。

display:table方式实现垂直居中,参考访问,感谢作者。