css設定margin:0 auto; 水平居中無效的原因分析-css教學-PHP中文網

css設定margin:0 auto; 水平居中無效的原因分析

伊谢尔伦

發布： 2016-11-23 14:36:32

原創

2127 人瀏覽過

很多初學製作網頁的朋友，可能會遇到的一個常見問題，就是在CSS中加了margin:0 auto;卻沒有效果，不能居中的問題，margin:0 auto;的意思就是：上下邊界為0 ，左右根據寬度自適應，其實就是水平居中的意思，在這裡說兩個典型的錯誤引起的不能居中的問題：

1、沒有設定寬度

<div style="margin:0 auto;"></div>

登入後複製

看看上面的程式碼，根本沒有設定DIV的寬度，如何依寬度自適應？新手比較容易忽略的問題。

2、沒聲明DOCTYPE

1）DOCTYPE是document type（文件類型）的簡寫，在web設計中用來說明你用的XHTML或HTML是什麼版本。要建立符合標準的網頁，DOCTYPE聲明是必不可少的關鍵組成部分。

2）看看下面的程式碼，是不是很熟悉？像這樣的，在文檔最頂端，所有程式碼之上的亂七八糟的東西，就是用來聲明DOCTYPE的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

登入後複製

3）你有三種選擇，用來聲明DOCTYPE

* 過渡的(Transitional)：要求非常寬鬆的DTD，它允許你繼續使用HTML4.01的標識(但是要符合xhtml的寫法)，完整代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

登入後複製

* 嚴格的(Strict)：要求嚴格的DTD，你不能使用任何表現層的標識和屬性，例如
，完整程式碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

登入後複製

* 框架的(Frameset)：專門針對框架頁面設計使用的DTD，如果你的頁面中包含有框架，需要採用這種DTD，完整程式碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

登入後複製

4）至於選擇哪一種，使用過渡的就可以了。

說了半天，margin:0 atuo;不起作用，不能居中的話，看看你的文檔最頂端有沒有聲明DOCTYPE，沒有就複製粘貼一下，就可以了。

還有就是margin:0 auto; 和margin-left:auto; margin-right:auto;的現實效果有時間還不一樣，其原因可能在於設置了margin-top的高度不為0時，會出現意想不到的效果。

php8，我來也