如何用CSS限定网页宽度，又如何让一个DIV在网页当中居中呢？ html+css做网页时，如何让整张网页居中显示
div+css\u600e\u4e48\u8bbe\u7f6e\u7f51\u9875\u56fa\u5b9a\u5bbd\u5ea6\u4e14\u5c45\u4e2d\uff1fdiv+css\u8bbe\u7f6e\u7f51\u9875\u56fa\u5b9a\u5bbd\u5ea6\u4e14\u5c45\u4e2d\uff0c\u9996\u5148\u9700\u8981\u786e\u5207\u7684\u77e5\u9053\u4f60\u8981\u7684\u7f51\u9875\u56fa\u5b9a\u5bbd\u5ea6\u662f\u591a\u5c11\uff0c\u7f51\u9875\u56fa\u5b9a\u5bbd\u5ea6\uff0c\u5176\u5b9e\u4e5f\u5c31\u662f\u5bf9\u4e8ebody\u7684\u5bbd\u5ea6\u7684\u9650\u5236\uff0c\u901a\u8fc7css\u53bb\u7ed9\u5bbd\u5ea6\u5c31\u884c\uff0c\u7136\u540e\u5728\u7ed9\u4e00\u4e2amargin\u5c31\u80fd\u5b9e\u73b0\u5c45\u4e2d\uff0cmargin\u7684\u7528\u6cd5\u5982\u56fe:
\u5177\u4f53\u7684\u770b\u4e0b\u4ee3\u7801\uff1a
body{
width:960px; //\u9650\u5b9a\u7f51\u9875\u7684\u5bbd\u5ea6
margin:0 auto;
boreder:1px solid #f00 //\u52a0\u4e2a\u8fb9\u6846\u5229\u4e8e\u89c2\u5bdf
}
\u6211\u662f\u6d4b\u8bd5\u6587\u5b57
\u6211\u662f\u6d4b\u8bd5\u6587\u5b57
\u4f7f\u7528CSS \u8bed\u6cd5\u8981\u8bbe\u5b9a\u4e00\u4e2adiv \u6c34\u5e73\u7f6e\u4e2d\uff0c\u662f\u5f88\u5e38\u89c1\u5230\u7684\u9700\u6c42\uff0c\u6700\u591a\u4eba\u4f7f\u7528margin: 0 auto; \u8fd9\u4e2a\u65b9\u6cd5\u5c31\u53ef\u4ee5\u8fbe\u6210\u3002\u4f46\u662f\uff0c\u5982\u679c\u8981\u8ba9\u4e00\u4e2adiv \u540c\u65f6\u95f4\u505a\u5230\u5728\u7f51\u9875\u4e0a\u6c34\u5e73\u7f6e\u4e2d\u8fd8\u8981\u5782\u76f4\u7f6e\u4e2d\uff0c\u4e5f\u5c31\u662fCSS \u4e0a\u4e0b\u5de6\u53f3\u7f6e\u4e2d\u8fd9\u5c31\u6709\u70b9\u9ebb\u70e6\u4e86\uff0c\u4e0d\u592a\u5bb9\u6613\u5594\uff01
\u5229\u7528table\u4e2d\u5185\u5bb9\u5728\u5355\u5143\u683c\u4e2d\u9ed8\u8ba4\u5782\u76f4\u5c45\u4e2d\u7684\u7279\u6027\u3002
2.\u5229\u7528css3\u4e2d\u7684transform\u5c5e\u6027
3.\u5229\u7528margin\u5c5e\u6027
4.\u5229\u7528\u5229\u7528position\u5c5e\u6027\u628aleft\uff0ctop\uff0cright\uff0cbottom\u56db\u4e2a\u7684\u503c\u8bbe\u4e3a0\uff0c\u518d\u7528margin:auto;
\u6700\u597d\u628a\u4f60\u7684\u4ee3\u7801\u6539\u5199\u4e86\u4e00\u4e0b\uff0c\u5e76\u5b9e\u73b0\u5c45\u4e2d\u6548\u679c
\u6548\u679c\u56fe
用CSS限定网页宽度，又让一个DIV在网页当中居中,这里需要理解的是一个页面的内容区域，就是body，我们就是通过给body来设置一个宽度，来做限制，至于DIV的居中，首先是需要给这个div一个宽度和高度，然后在使用margin去做，margin的用法，如图：
具体的实现看代码:
<html>
<head>
body{
width:960px; //限定网页的宽度
}
#div1{
width:200px;
height:600px;
margin:0 auto;
boreder:1px solid #f00 //加个边框利于观察
}
</head>
<body>
<div id='div1'>
我会居中
</div>
</body>
</html>
margin:0px auto;需要配合<!DOCTYPE 标签使用！也就是要声明代码支持的版本！一般说：
HTML 4.0 : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML5： <!DOCTYPE HTML>
有时候，你直接写<html></html>这样的标签，有些属性是不支持，特别是在IE系列的浏览器下~~
直接在标签中写属性的方法已经不推荐了！如：<body width="960px">这种写法不错，但是不推荐！
对于页面的宽度一般使用js等脚本控制！当然，css也有相关的属性（min-width,max-width,min-height,max-height），但是，有些浏览器不支持！
假设想要一个页面居中，方法有很多，标准的方法就是margin了~例如：
css中定义一个类属性
.main {width:960px;margin:0px auto;}
html中调用~
<div class="main">居中对齐</div>
<div class="main header">第二个居中对齐</div>
css中类的定义就这么个好处~一次定义，无限使用~
其他的居中方法有js计算（窗口宽度/2 -元素宽度/2就得到了元素距离窗口左侧的距离，这个需要配合window.resize窗口缩放事件并用），text-align(外层元素text-align：center；据中，内部元素继续text-align：left。一般这样的写法是给IE5的~呵呵~)，table搞笑法（新建table，三列，100%,中间的td就是绝对居中的）....还有很多，反正说来说去：固定宽度，margin不错~流体宽度js不错~其他的都是扯淡~呵呵
-------------------------------------------------PS------------------------------------
默认情况下，使用div定义一个内容区域，他就是居中对齐的~因为div本身是100%宽度的~
另外，你需要了解一下960 grid。学会框架，样式分离使用~~例如：我会定义一个layout.css文件来放置各种模块的宽度设置，定位设置等布局用的属性，而页面的其他样式，什么背景色，颜色，链接，我会放到一个style.css或者main.css（一般公用的样式放在其中），当然，如果还有其他很多页面样式，我则可以继续新建css去放置！
这样一来，页面调用就好说了：先载入框架，layout.css，然后载入全局样式，main.css，如果这个页面比较特殊，有他自己的样式，则，继续载入该页面的样式,home.css~~
当然layout.css是可以重复使用的~~除此之外，还有reset.css【重置html默认样式】等等....
不要在body里面设置例如width、height等值，如果想让div居中，设置body的margin:px;padding:0px;就可以了，然后给div设置你说的margin:0 auto;就可以了；实在不行你可以设置body{margin:0px;padding:0px;position:relative;}然后设置你想剧中的div{position:absolute;top:50%;left:50%;margin:-h(div的高度/2)px 0 0 -w(div的宽度/2)px;}应该就可以了 希望可以帮到你
在你需要剧中的div外层套一层div，将外层div样式调整为：left：50%，绝对定位。然后将你需要剧中的div，绝对定位，left：-50%；
就好了。
上面的比较复杂，是div不定宽的时候用的，如果定宽的话，直接写上宽度，然后margin：0 auto 就行了
上代码
绛旓細闇瑕佸噯澶囩殑鏉愭枡鍒嗗埆鏈夛細鐢佃剳銆佹祻瑙堝櫒銆乭tml缂栬緫鍣ㄣ1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓html鏂囦欢锛屼緥濡傦細index.html銆2銆佸湪index.html涓殑鏍囩涓紝杈撳叆css浠ｇ爜锛歵able {width: 70%}銆3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃舵棤璁缃戦〉澶у皬濡備綍鍙樺寲锛宼able鎬昏兘鍗犵敤缃戦〉70%鐨瀹藉害锛鍙互瀹炵幇闅忕潃灞忓箷鍙樺寲鑰屽彉鍖栥
绛旓細viewport鏄綉椤甸粯璁ょ殑瀹藉害鍜岄珮搴︼紝涓婇潰杩欒浠ｇ爜鐨勬剰鎬濇槸锛岀綉椤靛搴榛樿绛変簬灞忓箷瀹藉害锛坵idth=device-width锛夛紝鍘熷缂╂斁姣斾緥锛坕nitial-scale=1锛変负1.0锛屽嵆缃戦〉鍒濆澶у皬鍗犲睆骞曢潰绉殑100%銆傛墍鏈変富娴佹祻瑙堝櫒閮芥敮鎸佽繖涓缃紝鍖呮嫭IE9銆傚浜庨偅浜涜佸紡娴忚鍣紙涓昏鏄疘E6銆7銆8锛夛紝闇瑕浣跨敤css3-mediaqueries.js銆備簩...
绛旓細鍙堝湪1998骞5鏈堝彂甯冧簡CSS2鐗堟湰锛屾牱寮忚〃寰楀埌浜嗘洿澶氱殑鍏呭疄銆俉3C鎶奃HTML(Dynamic HTML)鍒嗕负涓変釜閮ㄥ垎鏉ュ疄鐜帮細鑴氭湰璇█(鍖呮嫭JavaScript銆乂bscript绛)銆佹敮鎸佸姩鎬佹晥鏋滅殑娴忚鍣(鍖呮嫭Internet Explorer銆丯etscape Navigator绛)鍜孋SS鏍峰紡琛ㄣ備綘鍙互鐢–SS绮剧‘鐨勬帶鍒椤甸潰閲屾瘡涓涓厓绱犵殑瀛椾綋鏍峰紡銆佽儗鏅佹帓鍒楁柟寮忋佸尯鍩熷昂瀵搞...
绛旓細妤间富鏄鐨缃戦〉鐨勫鍜岄珮鍚 瀹藉害鐨勮瘽 涓鑸槸1002px鑳芥弧灞忔樉绀 楂樼殑璇濇槸580px鑳芥樉绀轰竴灞 杩樻湁妤间富鍙互鐢ㄧ櫨鍒嗘瘮鐨勬柟寮忓畾涔夊搴﹀拰楂樺害 鐧惧垎姣旂殑璇濆彧鏄畾浣嶄笉鏄緢鍑嗙‘ 鍏朵粬鐨勫ソ鍍忔病浠涔堜簡 绁濅綘濂借繍锛
绛旓細1:娌℃湁瑙佸埌鍥 2锛氭柊寤虹┖鐧界綉椤碉紝鎻掑叆涓涓1琛1鍒楃殑琛ㄦ牸锛屾寚瀹氳繖涓〃鏍肩殑瀹藉害涓轰綘闇瑕佽缃殑缃戦〉瀹藉害锛渚嬪1000鍍忕礌锛岀劧鍚庣綉椤电殑鎵鏈夊唴瀹归兘宓屽鍦ㄨ繖涓〃鏍奸噷锛岃繖鏄渶绠鍗曠殑鍔炴硶銆3锛氭渶濂界殑鍔炴硶锛屼娇鐢―IV鏍囩锛屼緥濡俠anner涓涓爣绛撅紝涓讳綋涓涓爣绛撅紝搴曢儴涓涓爣绛撅紝鐢–SS璁惧畾DIV鏍囩鐨勫搴︺
绛旓細瀵瑰厓绱犵殑鐨勫睘鎬ц繘琛岃缃,鎴栬呴棿璺 margin:auto auto;鍙互灞呬腑锛宲ading-left...绛夌瓑杩樺彲浠ヤ娇鐢ㄧ櫨鍒嗘瘮杩涜浣嶇疆鐨勭浉瀵硅缃
绛旓細DIV瀹藉害璁剧疆鏂瑰紡鍙婃渚嬪涓嬶細DIV缃戦〉甯冨眬涓綋鍒嗚鲸鐜囧皬浜庣瓑浜1024px锛堝儚绱狅級鏃讹紝DIV甯冨眬瀵硅薄鏄剧ず1000px瀹藉害锛褰撳垎杈ㄧ巼澶т簬1024px鏃跺欐樉绀1200px瀹藉害绛夐渶姹傘浣跨敤CSS瀹炵幇鏀瑰彉娴忚鍣ㄦ樉绀哄搴︿粠鑰屽疄鐜板竷灞鐨缃戦〉瀹藉害鍔ㄦ佹敼鍙樺彉鍖栵紙缃戦〉瀹藉害鑷姩闅忔祻瑙堝櫒鏄剧ず瀹藉害鑰屽彉瀹藉彉绐勶級銆備娇鐢–SS鍗曡瘝涓庤娉 1.浠ｇ爜濡備笅:media ...
绛旓細鍋氱綉绔欒椤甸潰鑷傚簲澶у皬鏂规硶浠ｇ爜濡備笅锛氫竴銆佺數鑴戠珯璁剧疆缃戠珯鑷傚簲鏂规硶 鍏ㄥ睆瀹藉害涓昏鍦ㄤ簬CSS浠ｇ爜涓紝灏唚idth涓100%锛岃屼笉鏄竴涓浐瀹氱殑鍍忕礌鍊硷紝浠ｇ爜濡備笅銆傛墜鏈虹綉璁剧疆缃戣嚜閫傚簲鏂规硶锛鍦ㄧ綉椤澶撮儴鍔犱笂杩欐牱涓鏉eta鏍囩锛 瑙ｉ噴锛
绛旓細缃戦〉鑷傚簲娴忚鍣ㄥぇ灏忥細棣栧厛瑕佸湪澶撮儴锛屽嵆鏍囩鍐呭啓鑷傚簲浠ｇ爜锛屽涓嬶細 鍏舵锛岀綉椤鍐呴儴鐨勫厓绱瀹藉害瑕佷娇鐢ㄧ櫨鍒嗘瘮锛屽湪涓嶅悓鐨勫睆骞曞ぇ灏忎笅闇浣跨敤濯掍綋鏌ヨ瀹氫箟涓嶅悓鐨css浠ｇ爜锛屼緥濡傦細media screen and (max-width:640px){ element{ color:#ff0000; } //灞忓箷瀹藉害灏忎簬640px鏃舵樉绀虹孩鑹插瓧浣 } media screen and (m...
绛旓細鏍峰紡瑙勫垯鏄彲搴旂敤浜庣綉椤典腑鍏冪礌锛屽鏂囨湰娈佃惤鎴栭摼鎺ョ殑鏍煎紡鍖栨寚浠ゃ傛牱寮忚鍒欑敱涓涓垨澶氫釜鏍峰紡灞炴у強鍏跺肩粍鎴愩傚唴閮ㄦ牱寮忓崟鐩存帴鏀鍦ㄧ綉椤涓紝澶栭儴鏍峰紡鍗曚繚瀛樺湪鐙珛鐨勬枃妗ｄ腑锛岀綉椤甸氳繃涓涓壒娈婃爣绛鹃摼鎺ュ閮ㄦ牱寮忓崟銆傚悕绉癈SS涓殑鈥滃眰鍙狅紙cascading锛夆濊〃绀烘牱寮忓崟瑙勫垯搴旂敤浜嶩TML鏂囨。鍏冪礌鐨勬柟寮忋傚叿浣撳湴璇锛孋SS鏍峰紡鍗曚腑鐨...
