網頁制作教程:css讓頁面居中對齊

2024-07-11 08:22:29

字體：大中小

來源：轉載

供稿：網友

總結一下css讓頁面居中對齊的方法
1.我們常用的margin:0 auto;方法
這個方法是大家用的最多的方法，使用的時候必須為容器制定寬度！
例子：

#main {width:960px;margin:0 auto;}

這個在大部分瀏覽器里面都可以很好的實現效果。

但是在ie6之前的版本中卻不被支持，下面看一下第二種方法

2. 用text-align實現居中，這個方法其實算是一個hack。
這個方法把整個頁面當作文本對待，把body的屬性設置為{text-align:center;}
這樣的話頁面所有內容全部居中了，還需要把頁面總的外框（wrap）屬性{text-align:left;}
這樣的話頁面就居中了！
代碼：

body{text-align:center;}
wrap {text-align:left;}

3.負的外邊距

負外邊距需要和絕對定位同時使用，才會生效。
首先需要一個{wrap}來包裹所有的頁面內容，并將其定位到頁面的50%。這樣{warp}容器據瀏覽器左邊50%的距離。

然后再用負邊距，將容器左邊距設置為{wrap}寬度的一半即可。
看代碼：

#wrap {width:800px;position:absolute;left:50%;margin:0 0 0 -400px;}

這樣wrap就居中對齊了，這個方法基本上可以兼容所有的瀏覽器了。

綜上所述：第一種方法是我們大家首選的解決方案，第二種方法其實可以和第一種方法結合起來用更好，第三種方法是是可以兼容所有的瀏覽器，如果你對你的也頁面兼容性要求的高些，這個也可以作為你的首選哈！

上一篇：CSS教程:first-letter偽類元素的特點

下一篇：CSS實例教程:分號引起頁面混亂