CSS中margin:auto是自动居中吗？ css代码中 margin:auto 和 margin:0...
css\u4e2dmargin\u548cpadding\u8bbe\u7f6e\u6210auto\u662f\u81ea\u9002\u5e94\u4ec0\u4e48\uff1f1\u3001\u6807\u7b7e\u6bd4\u5982\u662f\u5757\u72b6\u5143\u7d20\uff0c\u5e76\u4e14\u6709\u4e2a\u786e\u5b9a\u7684\u5bbd\u5ea6\uff0c\u767e\u5206\u6bd4\u7684\u5bbd\u5ea6\u4e5f\u884c\uff1bpadding\u7684\u8bdd, \u8bbe\u7f6e\u6210auto\u5b83\u4f1a\u81ea\u52a8\u7ee7\u627f\u6d4f\u89c8\u5668\u7684padding\u503c\uff0c\u56e0\u4e3a\u6709\u4e9b\u5947\u8469\u6d4f\u89c8\u5668\u662f\u9ed8\u8ba4\u6709padding\u503c\u7684\uff0c\u4e3a\u4e86\u907f\u514d\u8fd9\u4e2a\u5bf9\u6837\u5f0f\u9020\u6210\u5f71\u54cd\uff0c\u6837\u5f0f\u5f00\u5934\u4e00\u822c\u4f1a\u52a0\u4e0a\u4e00\u53e5*{margin:0;padding:0};\u3002
2\u3001\u81ea\u9002\u5e94\uff0c\u4e00\u822c\u662f\u81ea\u9002\u5e94\u5c4f\u5e55\u5927\u5c0f\uff0c\u6bd4\u5982\u6211\u4eec\u7684\u7535\u8111\u3001\u624b\u673a\u90fd\u6709\u5f88\u591a\u4e0d\u540c\u5c3a\u5bf8\u7684\u5c4f\u5e55\uff0c\u90a3\u4e48\u505a\u51fa\u6765\u7684\u9875\u9762\u5c31\u8981\u517c\u5bb9\u8fd9\u79cd\u5c3a\u5bf8\u7684\u53d8\u5316\uff0c\u800c\u4e0d\u4f1a\u8ba9\u5e03\u5c40\u9519\u4e71\u3002
3\u3001\u4e00\u822cPC\u7aef\u5e03\u5c40\u6837\u5f0f\u662f\u7528\u767e\u5206\u6bd4\uff0c\u4e0d\u8fc7\u79fb\u52a8\u7aef\u7684\u8bdd\uff0c\u56e0\u4e3a\u5bf9css3\u7684\u517c\u5bb9\u6027\u975e\u5e38\u597d\uff0c\u6240\u6709\u8981\u8fbe\u5230\u81ea\u9002\u5e94\uff0c\u53ef\u4ee5\u7528css3\u6765\u5e03\u5c40\uff0c\u5f53\u7136\u8fd8\u6709\u6bd4\u8f83\u6d41\u884c\u7684\u54cd\u5e94\u5f0f\u5e03\u5c40\u3002
4\u3001\u5c42\u53e0\u6837\u5f0f\u8868(\u82f1\u6587\u5168\u79f0:Cascading Style Sheets)\u662f\u4e00\u79cd\u7528\u6765\u8868\u73b0HTML(\u6807\u51c6\u901a\u7528\u6807\u8bb0\u8bed\u8a00\u7684\u4e00\u4e2a\u5e94\u7528)\u6216XML(\u6807\u51c6\u901a\u7528\u6807\u8bb0\u8bed\u8a00\u7684\u4e00\u4e2a\u5b50\u96c6)\u7b49\u6587\u4ef6\u6837\u5f0f\u7684\u8ba1\u7b97\u673a\u8bed\u8a00\u3002CSS\u4e0d\u4ec5\u53ef\u4ee5\u9759\u6001\u5730\u4fee\u9970\u7f51\u9875\uff0c\u8fd8\u53ef\u4ee5\u914d\u5408\u5404\u79cd\u811a\u672c\u8bed\u8a00\u52a8\u6001\u5730\u5bf9\u7f51\u9875\u5404\u5143\u7d20\u8fdb\u884c\u683c\u5f0f\u5316\u3002
5\u3001CSS \u80fd\u591f\u5bf9\u7f51\u9875\u4e2d\u5143\u7d20\u4f4d\u7f6e\u7684\u6392\u7248\u8fdb\u884c\u50cf\u7d20\u7ea7\u7cbe\u786e\u63a7\u5236\uff0c\u652f\u6301\u51e0\u4e4e\u6240\u6709\u7684\u5b57\u4f53\u5b57\u53f7\u6837\u5f0f\uff0c\u62e5\u6709\u5bf9\u7f51\u9875\u5bf9\u8c61\u548c\u6a21\u578b\u6837\u5f0f\u7f16\u8f91\u7684\u80fd\u529b\u3002
\u4e00\u3001\u533a\u522b
1\u3001\u53c2\u6570\u8be6\u89e3
margin:auto = margin:auto auto auto auto;margin:0 auto = margin:0 auto 0 auto;
margin:n m p q\u8868\u793a\u8be5\u5143\u7d20\u4e0a\u5916\u8fb9\u8ddd\u4e3an\uff0c\u53f3\u5916\u8fb9\u8ddd\u4e3am\uff0c\u4e0b\u5916\u8fb9\u8ddd\u4e3ap\uff0c\u5de6\u5916\u8fb9\u8ddd\u4e3aq\uff0c\u5373 margin:\u4e0a \u53f3 \u4e0b \u5de6 \uff0c\u9006\u65f6\u9488\u4e00\u5708\u3002
2\u3001\u5b9e\u4f8b\u8bf4\u660e
margin\u540e\u9762\u662f\u67094\u4e2a\u53c2\u6570\u7684\u3002
\u4f8b\u5982\uff1amargin:1px 2px 3px 4px\uff0c\u5206\u522b\u8868\u793a \u4e0a\uff081px\uff09\u3001\u53f3(2px)\u3001\u4e0b(3px)\u3001\u5de6(4px)\u3002
margin\u540e\u9762\u5982\u679c\u53ea\u51992\u4e2a\u53c2\u6570\u7684\u3002
\u4f8b\u5982\uff1amargin\uff1a1px 2px
\u90a3\u4e48\u8fd9\u662f\u4ee3\u8868 \u4e0a\u4e0b\u90fd\u4e3a1px \u5de6\u53f3\u90fd\u4e3a2px\u3002
\u6269\u5c55\u8d44\u65991\u3001margin 0px auto\u5c5e\u6027\u89c4\u5219
margin:0px auto\u4ee3\u8868\u5bf9\u8c61\u4e0a\u4e0b\u95f4\u9694\u4e3a0px\uff0c\u5de6\u53f3\u95f4\u9694\u6839\u636e\u5bf9\u8c61\u5bbd\u5ea6\u81ea\u9002\u5e94\u3002
margin:0px auto\u7b80\u5199\uff1a\u53ef\u4ee5\u53bb\u63890\u540e\u9762\u7684px\u5355\u4f4d\uff0c\u4e00\u822cCSS\u4ee3\u7801\u4e2d\u5982\u679c\u503c\u4e3a0\uff0c\u90a3\u53ef\u4ee5\u4e0d\u7528\u8ddfhtml\u957f\u5ea6\u5355\u4f4d\u3002
margin;0px auto\u6216margin:0 auto\u4f5c\u7528\uff1a\u5e38\u7528\u4e8e\u8ba9DIV\u5e03\u5c40\u5c45\u4e2d,\u8d77\u5230\u8ba9\u5e03\u5c40\u5c45\u4e2d\u4f5c\u7528\u3002
2\u3001margin:auto\u5c5e\u6027\u8bf4\u660e
margin:auto\u65f6\u6d4f\u89c8\u5668\u8ba1\u7b97\u5916\u8fb9\u8ddd,\u5f53margin\u5b9a\u4e49\u4e3aauto\u65f6,\u5c06\u5360\u7528\u53ef\u7528\u7a7a\u95f4\u62160px \u3002
margin:auto\u65f6\u6d4f\u89c8\u5668\u4f1a\u81ea\u52a8\u5206\u914d\u5de6\u53f3\u8fb9\u8ddd\uff0c\u4f7f\u5143\u7d20\u5e73\u5747\u5206\u914d\u5360\u7528\u7236\u7ea7\u5bb9\u5668\u7684\u5de6\u53f3\u8fb9\u8ddd\uff0c\u8fbe\u5230\u5143\u7d20\u5c45\u4e2d\u7684\u76ee\u7684
3\u3001CSS\u4e2dauto\u5143\u7d20
\u5b9a\u4e49auto\u5143\u7d20\uff0c\u56e0\u5143\u7d20\u7c7b\u578b\u548c\u4e0a\u4e0b\u6587\u800c\u5f02\u3002\u5728\u8fb9\u8ddd\u4e2d\uff0cauto\u53ef\u4ee5\u8868\u793a\u4e24\u79cd\u60c5\u51b5\uff1a\u5360\u7528\u53ef\u7528\u7a7a\u95f4\u62160 px\u3002\u8fd9\u4e24\u4e2a\u5c06\u4e3a\u5143\u7d20\u5b9a\u4e49\u4e0d\u540c\u7684\u5e03\u5c40\u3002
4\u3001margin\u7684\u5144\u5f1f\u5c5e\u6027padding
margin\u5c5e\u6027\u662f\u5916\u8fb9\u8ddd\uff0c\u800cpadding\u5c5e\u6027\u662f\u5185\u8fb9\u8ddd\u3002padding\u662f\u6307\u81ea\u8eab\u8fb9\u6846\u5230\u81ea\u8eab\u5185\u90e8\u53e6\u4e00\u4e2a\u5bb9\u5668\u8fb9\u6846\u4e4b\u95f4\u7684\u8ddd\u79bb\uff0c\u5c31\u662f\u5bb9\u5668\u5185\u8ddd\u79bb\u3002
如果只写两个值：margin:10px 5px; ，表示对象与父容器的上下距离值都是10px，与左右的距离值都是5px。
那么这时候我们来看margin:0 auto; ，这个就表示上下的距离值是0，而左右就是自动适应，也就是我们常说的自动居中。
而你所说的margin:auto; ， 就表示上下左右都自动适应。
纯手打，望采纳。
先看margin，margin有4个值：margin:10px 11px 9px 8px; ，按顺序分别代表对象与父容器的上、右、下、左的距离值为10px,11px,9px,8px。这还不能肯定是不是自动居中。
如果只写两个值：margin:10px 5px; ，表示对象与父容器的上下距离值都是10px，与左右的距离值都是5px。这也不是自动居中。
那么这时候我们来看margin:0 auto ，这个就表示上下的距离值是0，而左右就是自动适应，也就是我们常说的自动居中。
margin【margin-top、margin-right、margin-bottom、margin-left】包含上、右、下、左四个方位，当你只有俩个参数的话，marin:50px auto;表示上下距离50px，左右自动居中
得设置宽度
绛旓細涓銆佸尯鍒 1銆佸弬鏁拌瑙 margin:auto = margin:auto auto auto auto;margin:0 auto = margin:0 auto 0 auto;margin:n m p q琛ㄧず璇ュ厓绱犱笂澶栬竟璺濅负n锛屽彸澶栬竟璺濅负m锛屼笅澶栬竟璺濅负p锛屽乏澶栬竟璺濅负q锛屽嵆 margin:涓 鍙 涓 宸 锛岄嗘椂閽堜竴鍦堛2銆佸疄渚嬭鏄 margin鍚庨潰鏄湁4涓弬鏁鐨銆備緥濡傦細margin:1px ...
绛旓細1銆佹剰鎬濅笉鍚屻margin:auto=margin:auto auto auto auto锛岃〃绀轰笂涓嬪乏鍙抽兘涓篴uto锛沵argin:0 auto=margin:0 auto 0 auto锛岃〃绀轰笂涓嬩负0锛屽乏鍙充负auto锛2銆佸眳涓柟寮忎笉鍚屻俶argin:auto琛ㄧず妯珫閮藉眳涓紝margin: 0 auto琛ㄧず妯眳涓紝绔栦笉灞呬腑锛沵argin鍚庨潰涓鑸細璺4涓弬鏁帮紝濡俶argin:1px銆1px銆1px銆1px锛屽垎鍒〃...
绛旓細margin:auto = margin:auto auto auto auto;margin:0 auto = margin:0 auto 0 auto;margin:n m p q琛ㄧず璇ュ厓绱犱笂澶栬竟bai璺濅负n锛屽彸澶栬竟璺濅负m锛屼笅澶栬竟璺濅负p锛屽乏澶栬竟璺濅负q锛屽嵆 margin:涓 鍙 涓 宸 锛岄嗘椂閽堜竴鍦堛
绛旓細濡傛灉鍙啓涓や釜鍊硷細margin:10px 5px; 锛岃〃绀哄璞′笌鐖跺鍣ㄧ殑涓婁笅璺濈鍊奸兘鏄10px锛屼笌宸﹀彸鐨勮窛绂诲奸兘鏄5px銆傞偅涔堣繖鏃跺欐垜浠潵鐪媘argin:0 auto; 锛岃繖涓氨琛ㄧず涓婁笅鐨勮窛绂诲兼槸0锛岃屽乏鍙冲氨鏄嚜鍔ㄩ傚簲锛屼篃灏辨槸鎴戜滑甯歌鐨勮嚜鍔ㄥ眳涓傝屼綘鎵璇鐨刴argin:auto; 锛 灏辫〃绀轰笂涓嬪乏鍙抽兘鑷姩閫傚簲銆傜函鎵嬫墦锛屾湜閲囩撼銆
绛旓細margin-right:auto; margin-left:auto;auto浠ｈ〃鏍峰紡鑷姩閫傚簲锛沵argin浠ｈ〃杈硅窛锛宮argin-right:auto鍜宮argin-left:auto鎰忔濇槸宸﹀彸杈硅窛鑷姩閫傚簲锛沴ine-height琛ㄧず姣忚琛岄珮锛屼篃鍙悊瑙ｄ负琛岄棿璺
绛旓細璁剧疆澶栬竟璺濈殑鏈绠鍗曠殑鏂规硶灏辨槸浣跨敤 margin 灞炴,杩欎釜灞炴ф帴鍙椾换浣曢暱搴﹀崟浣嶃佺櫨鍒嗘暟鍊肩敋鑷宠礋鍊笺 CSS margin 灞炴 璁剧疆澶栬竟璺濈殑鏈绠鍗曠殑鏂规硶灏辨槸浣跨敤 margin 灞炴с margin 灞炴ф帴鍙椾换浣曢暱搴﹀崟浣,鍙互鏄儚绱犮佽嫳瀵搞佹绫虫垨 em銆 margin 鍙互璁剧疆涓 auto銆傛洿甯歌鐨勫仛娉曟槸涓哄杈硅窛璁剧疆闀垮害鍊笺備笅闈㈢殑澹版槑鍦 h1 鍏冪礌鐨勫悇...
绛旓細margin auto鏄CSS涓鐨勪竴绉嶅竷灞鎶宸э紝鎸囧湪姘村钩鏂瑰悜涓婅缃竴涓厓绱犵殑澶栬竟璺濅负鑷姩銆傝繖鏍峰氨鍙互璁╄鍏冪礌鍦ㄥ鍣ㄤ腑姘村钩灞呬腑锛岄傜敤浜庡緢澶氬満鏅紝姣斿灞呬腑涓涓猟iv鍏冪礌銆佸浘鐗囨垨鑰呭鍣ㄣ備娇鐢╩argin auto鐨勫ソ澶勫湪浜庡彲浠ヨ椤甸潰鐨勫竷灞鏇村姞缇庤锛屾彁楂樼敤鎴蜂綋楠屻傚緢澶氭椂鍊欙紝鎴戜滑闇瑕佽鍏冪礌灞呬腑锛屼絾鏄畠鐨勫搴︽槸涓嶅畾鐨勶紝杩欐椂鍊...
绛旓細1銆佺粷瀵瑰畾浣+margin锛歛uto .wrp { background-color: #b9b9b9; width: 240px; height: 160px; }.box { color: white; background-color: #3e8e41; width: 200px; height: 120px; overflow: auto; }.wrp1 { position: relative; }.box1 { margin: a...
绛旓細margin:10px auto; 璁剧疆澶栬竟璺濓紝涓婁笅鍒嗗埆涓10鍍忕礌锛屽乏鍙宠嚜鍔紱margin-bottom:35px; 璁剧疆涓嬫柟鐨澶栬竟璺濅负35鍍忕礌锛沺osition:relative鍜宲osition:absolute, 鍗冲父璇寸殑缁濆瀹氫綅锛屼竴鑸細鍦ㄧ敤涓鑸殑鎺掔増鏂规硶鏃犳硶瀹炵幇甯冨眬鏁堟灉鐨勬椂鍊欎娇鐢紝渚嬪浣犵敤img鏍囩鎻掑叆涓寮犲浘鐗囧悗鍙堟兂鍦ㄥ浘鐗囦笂杈瑰啓瀛楀氨鍙互鐢ㄧ粷瀵瑰畾浣嶆妸鍖...
绛旓細1銆佸畾浣+margin锛歛uto 鐖跺厓绱 position: relative 瀛愬厓绱 position: absolute left:0;top:0;right:0;bottom:0;margin: auto;2銆佸畾浣+margin-left+margin-top 鐖跺厓绱 position: relative 瀛愬厓绱 position:absolute left:50%; top:50%; margin-left: -褰撳墠鐩掑瓙瀹藉害鐨涓鍗; margin-top: -褰撳墠鐩掑瓙...
