CSS Div完美居中方法其实就是div垂直居中了,我们只要上下左右都设置50%就可以了,那你这就错了,下面我们来看看。
CSS中有很多(水平/垂直)居中的方法今天刚好看到一个新的方法,嘿嘿,自我感觉一下非常好用.而且以前我也没见过.所以今天就记一下.下次备用
HTML
代码如下
复制代码
<DIV class="demo center">
<DIV></DIV></DIV>CSS
.center{
/* 需要宽度支持但自适应 */
position:relative;
}
.center>*{
/* ie8+,ie7-请使用js或者其它方法 */
position:absolute; margin:auto; overflow:auto; top:0; left:0; bottom:0; right:0;}
.demo{ width:200px; height:200px; background-color:#55DF00;}
.demo>div{ width:500px; height:500px; background-color:#2A5F00;}
结果如图所示
当然人无完人,这个方法也是有他的局限性的,就是IE7-不支持此方法.
由于使用了绝对定位,子元素会居于父元素的左上角.这点需要切记,
但是我还是很喜欢这种方法,跟其它的居中方法有很多的区别,对于子元素里面的元素样式干扰很少.用起来还是挺棒的.