您當前位置：首頁 > web前端 > htmlcss > CSS+DIV網頁居中的常見兩種方法

CSS+DIV網頁居中的常見兩種方法

來源：程序員人生發布時間：2014-02-02 06:08:49 閱讀次數：2706次

例如：.html文件代碼如下，

以下為引用的內容：
<html>
<head>
<title>居中DIV</title>
</head>
<body>
<div id="mainDiv>
居中的div
</div>
</body>
</html>

則實現居中的方法CSS代碼為第一種方法：

以下為引用的內容：
body
{
text-align:center ;
background-color:#ccc;
min-width:780px;
}
#mainDiv
{
width:760px;
border:1px solid white;
margin:0 auto
}

第二種：負空白邊定位法實現的CSS代碼為

以下為引用的內容：
body {
text-align:center
background-color:#ccc;
min-width:780px;
}
#mainDiv
{
width:760px;
margin-left:-380px;
left:%50;
positive:relative;
border:1px solid white
}

　　好了，有人會問為什么要使用“min-width”屬性來定義body的最小寬度呢？，而且其最小寬度要大于或等于div的寬度。如果不怎樣，可能會出現頁面的內容被擠出瀏覽器的可視區域，具體這是為什么這個是瀏覽器的問題，各種瀏覽器對CSS 的支持有少許不同。

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 雨澤博客：解讀百度《搜索引擎優化指南》

下一篇 CSS教程：相對、絕對定位及布局和浮動

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

CSS+DIV網頁居中的常見兩種方法