用CSS创建不同分辩率下居中的页面

本文链接：https://blog.youkuaiyun.com/Arxi/article/details/552993

本文介绍了用CSS创建居中页面的方法。先定义body样式，设背景色为黑、外补丁为0防止滚动条；再定义container标签，设宽度并通过左右外补丁自动适应实现居中。还提及在IE和Firefox浏览器中页面居中的不同要求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用CSS创建居中页面（在800×600页面效果是满屏，1024×768效果是居中）
首先，定义body的样式如下：
body{
background-color:black;
margin:0px
}
为看到明显效果，定义背景色为黑色。页面外补丁为0px，防止产生水平滚动条。
然后定义一个container标签如下：
#container {
width:760px;
margin-left:auto;
margin-right:auto;
background-color:white;
height:800px
}
定义宽度为760px，最关键的地方是margin-left:auto;magin-right:auto;
设置左右的外补丁为自动适应，使container居中的关键。

html页面如下：

html页面中，如果在IE浏览器中须加上

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

才可以居中，或者在body中定义text-align:center属性，而在firefox中，则无需定义doctype或text-align也可以居中^_^。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html XMLns="http://www.w3.org/1999/xhtml" >
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<head>
<link rel="stylesheet" href="index1.css" type="text/css" />
<title>公司简介</title>
</head>
<body>
<div id="container">
   <div id="header"></div>
   <div id="mainbox">
       <div id="menu"></div>
       <div id="sidebar"></div>
       <div id="content"></div>
   </div>
   <div id="footer"></div>
</div>
</body>
</html>