div怎样居中？HTML中div怎样居中呢？
CSS来实现DIV居中，用CSS实现DIV居中的方法有很多，这次教给大家的是比较简单并且兼容性很棒的一段代码，快点进来看看吧。
需要的主要css代码有两个，一个为text-align:center（内容居中），另外一个为margin:0auto；其两个样式需要配合使用才能实现div盒子的居中显示排版。
首先我们对body设置text-align:center，再对需要居中的div盒子设置css样式margin:0auto，这样即可让对应div水平居中。
div居中代码应用，为了观察div居中效果，我们对div设置一个div命名为“.div”在html中div标签内使用class=“div”,设置其宽度为400px;高度为100px，边框为红色。以便我们观察效果。
1、完整html+css代码
div居中绛旓細DIV灞呬腑鎻愪緵涓や釜鏂规硶锛1銆佺畝鍗曞揩鎹锋柟娉曞氨鏄姞<center>鍐呭</center>鏍囩銆傜ず渚嬶細<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>center灞呬腑</title></head><body><center><div>鎴戣灞呬腑鍟</div></center></body></html>2銆div涓鍔犲叆margin:0 ...
绛旓細<style> .fixed{ width: 300px;height: 150px;background-color: red;position: fixed;top: 20%;} </style> 4銆佹煡鐪嬫牱寮忔晥鏋滐紝淇濆瓨html鏂囦欢鍚庝娇鐢ㄦ祻瑙堝櫒鏌ョ湅璁剧疆鐨勬晥鏋溿5銆佽缃畃osition:fixed 灞呬腑銆備负浜嗙粰div鑷姩灞呬腑鏄剧ず锛屽彧闇瑕佸湪fixed绫讳腑鍐嶆坊鍔狅細left: 0;right: 0;margin:0 auto;6銆佹煡鐪...
绛旓細姘村钩灞呬腑鐩存帴鍔犱笂 鏍囩鍗冲彲锛屾垨鑰呰缃甿argin:auto;褰撶劧涔熷彲浠ョ敤涓嬮潰鐨勬柟娉 涓嬮潰璇翠袱绉嶅湪灞忓箷姝ｄ腑锛堟按骞冲眳涓+鍨傜洿灞呬腑锛夌殑鏂规硶锛屾斁涓婄ず鑼鐨刪tml浠ｇ爜锛氭柟娉曚竴锛div浣跨敤缁濆甯冨眬锛岃缃甿argin:auto;骞惰缃畉op銆乴eft銆乺ight銆乥ottom鐨勫肩浉绛夊嵆鍙紝涓嶄竴瀹氳閮芥槸0銆.main{ text-align:center;/*璁ヾiv鍐呴儴鏂囧瓧灞呬腑...
绛旓細涓轰簡渚夸簬瑙傚療甯冨眬灞呬腑鏁堟灉锛屾垜浠啀瀵光#divcss5鈥濆姞涓涓猚ss杈规涓洪粦鑹诧紝css瀹藉害涓300px;楂樺害涓100px鏍峰紡銆傛渶缁堝緱鍒DIV灞呬腑鐨凜SS浠ｇ爜锛歜ody{ text-align:center} divcss5{margin:0 auto;border:1px solid #000;width:300px;height:100px} 瀵瑰簲html浠ｇ爜鐗囨锛<div id="divcss5">DIV姘村钩灞呬腑妗堜緥</...
绛旓細1銆佸湪 DIV 鏍囩瀵逛腑鍐欏叆鐨勬鏂囨爣绛剧殑 HTML 涓<div></div>銆2銆佺劧鍚庢垜浠皢 div 璁剧疆涓哄楂樺害, 鎴戜滑闇瑕佹敞鎰忕殑鏄, 濡傛灉鎮ㄤ笉璁剧疆榛樿鍊肩殑瀹藉害涓100% 鍝, 鎵浠ュ畠灏嗗～鍏呮暣涓〉闈3銆佺劧鍚庢垜浠缃 Div 鐨勮竟璺, 绗竴涓弬鏁版寚绀洪《閮ㄧ殑璺濈涓 0, 绗簩涓嚜鍔ㄨ〃绀鸿嚜鍔ㄣ備篃灏辨槸璇, 鍦ㄨ缃璁剧疆鍚, ...
绛旓細姹借溅鍔熸斁鏉夸笂鐨刾鏄粈涔堟剰鎬濓紵DIV鏄眰鍙犳牱寮忚〃涓殑瀹氫綅鎶鏈紝鍏ㄧОDIVision锛屽嵆涓哄垝鍒嗭紱鏈夋椂鍙互绉板叾涓哄浘灞傘侱IV鏄HTML涓鐨勪竴涓爣绛惧厓绱狅紝鐢ㄦ潵涓篐TML锛堟爣鍑嗛氱敤鏍囪璇█涓嬬殑涓涓簲鐢級鏂囨。鍐呭ぇ鍧楋紙block-level锛夌殑鍐呭鎻愪緵缁撴瀯鍜岃儗鏅殑鍏冪礌銆鎬庝箞瀹炵幇鍐呴儴鐨刾鏍囩鐨勬按骞冲拰鍨傜洿灞呬腑锛涓涓瘮杈冪畝鍗曠殑鏂规硶灏辨槸...
绛旓細鎴戜滑杩涜椤甸潰寮鍙戠殑鏃跺欙紝鏈缁忓父鐢ㄧ殑灏辨槸div鏍囩浜嗭紝閭ｄ箞div涓鐨勫唴瀹濡備綍灞呬腑鏄剧ず鍛紝涓嬮潰灏忕紪缁欏ぇ瀹跺垎浜竴涓嬨傞鍏堟垜浠敤sublime鍏堝垱寤轰竴涓猦tml锛屽苟涓斿湪html閲岄潰鍔犲叆div锛屽涓嬪浘鎵绀 鐒跺悗鎴戜滑鍦╠iv涓姞鍏ヤ竴浜涙枃瀛楋紝濡備笅鍥炬墍绀猴紝鏂囧瓧鐢╯pan鍖呰９璧锋潵 杩愯椤甸潰绋嬪簭浠ュ悗鎴戜滑浼氱湅鍒版枃瀛楀湪div鐨勫乏涓婅锛屽苟娌℃湁...
绛旓細1銆佸彲浠ョ敤text-align灞炴ц缃傞鍏堟墦寮hbuilder缂栬緫鍣紝鏂板缓涓涓html鏂囦欢锛屽厛鍒囨崲鍒拌竟鏀硅竟鐪嬫ā寮忥細2銆佸啓涓涓猟iv鍑烘潵锛屽悓鏃跺湪鍐呴儴鍔犱笂涓浜涙枃瀛楋紝浣跨敤css澧炲姞灞炴э紝浣垮緱div鐨鍖哄煙鐪嬪緱娓呮锛3銆佹帴涓嬫潵灏变娇鐢╰ext-align鐨刢enter灞炴у皢鏂囧瓧妯悜灞呬腑锛屽悓鏃惰缃楂橈紝浣胯繖琛屾枃瀛楀疄闄呭崰鐢ㄧ殑楂樺害鍜宒iv楂樺害鐩稿悓锛屽氨...
绛旓細鍙傜収浠ヤ笂Html浠ｇ爜锛岃鏈澶栭潰鍚嶄负box鐨凞iv鍛堣〃鏍兼牱寮忔樉绀猴紝鐒跺悗鍐嶈box涓悕涓篶ontent鐨凞iv鍛堝崟鍏冩牸鏄剧ず锛屽苟鍒╃敤vertical-align:middle璁╁叾鍨傜洿灞呬腑锛岃繖鏍峰氨妯℃嫙鍑烘潵鍜岃〃鏍间竴鏍风殑鏄剧ず鏂瑰紡锛孋SS浠ｇ爜濡備笅锛歸rap { height:400px; display:table; } #content { vertical-align:middle; display:table-cell; ...
绛旓細2 涓嬮潰鏄疄鐜 div鍧楃骇鍏冪礌姘村钩灞呬腑 鐨勪唬鐮 锛氾紙鍦ㄤ笅闈㈢殑浠ｇ爜 鎴鐨刣iv 瀹藉害200px 楂樺害40px 鑳屾櫙棰滆壊鏄摑鑹 鏂囧瓧姘村钩灞呬腑锛 鍏跺疄娌′粈涔堢壒鍒ソ瑙ｉ噴鐨 灏辨槸涓涓牱寮忥紝鏄洜涓虹櫨搴﹂珮璐ㄩ噺鐨勫洖绛 鎴戞妸寰堢畝鍗曠殑闂鍐嶈В閲婁簡涓閬嶏紝<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="...
