方法一 :利用auto maigins
先設置一個要居中的div
- <body>
- <div id="wrap">
- </div>
- </body>
而後css
- #wrapper {
- width: 720px;
- margin: 0 auto;
- }
這樣在大部分主流瀏覽器都是能夠的,可是在IE6是 不 能正常顯示的,解決 辦法
修改css
- body {
- text-align: center;
- }
- #wrapper {
- width: 720px;
- margin: 0 auto;
- text-align: left;
- }
IE會把text-align: center;理解爲讓全部的東西 都居中,這樣就解決了兼容問題。
方法二:使用定位和負值空白邊
只要改一下css代碼
- #wrapper {
- width: 720px;
- position: relative;
- left: 50%;
- margin-left: -360px;
- }
至於爲何這樣作你們本身分析下吧,很簡單的,沒什麼大道理。