CSS Div完美置中方法

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-不支援此方法.

由於使用了絕對位置,子項目會居於父元素的左上方.這點需要切記,

但是我還是很喜歡這種方法,跟其它的置中方法有很多的區別,對於子項目裡面的元素樣式幹擾很少.用起來還是挺棒的.