總結(jié)一下css讓頁面居中對齊的方法
1.我們常用的margin:0 auto;方法 這個方法是大家用的最多的方法,使用的時候必須為容器制定寬度!
例子:
#main {width:960px;margin:0 auto;}
這個在大部分瀏覽器里面都可以很好的實現(xiàn)效果。
但是在IE6之前的版本中卻不被支持,下面看一下第二種方法
2. 用text-align實現(xiàn)居中,這個方法其實算是一個hack。 這個方法把整個頁面當(dāng)作文本對待,把body的屬性設(shè)置為{text-align:center;}
這樣的話頁面所有內(nèi)容全部居中了,還需要把頁面總的外框(wrap)屬性{text-align:left;}
這樣的話頁面就居中了!
代碼:
body{text-align:center;}
wrap {text-align:left;}
3.負(fù)的外邊距 負(fù)外邊距需要和絕對定位同時使用,才會生效。
首先需要一個{wrap}來包裹所有的頁面內(nèi)容,并將其定位到頁面的50%。這樣{warp}容器據(jù)瀏覽器左邊50%的距離。
然后再用負(fù)邊距,將容器左邊距設(shè)置為{wrap}寬度的一半即可。
看代碼:
#wrap {width:800px;position:absolute;left:50%;margin:0 0 0 -400px;}
這樣wrap就居中對齊了,這個方法基本上可以兼容所有的瀏覽器了。
綜上所述:第一種方法是我們大家首選的
解決方案,第二種方法其實可以和第一種方法結(jié)合起來用更好,第三種方法是是可以兼容所有的瀏覽器,如果你對你的也頁面兼容性要求的高些,這個也可以作為你的首選哈!