如何设置一个div块级元素水平居中？ 为什么可以让块级元素水平居中
1\u600e\u4e48\u8ba9\u4e00\u4e2adiv\u5757\u7ea7\u5143\u7d20\u6c34\u5e73\u5c45\u4e2d1 \u4e3b\u8981\u7684\u6838\u5fc3\u601d\u60f3\u5c31\u662f\u7ed9div\u8bbe\u7f6emargin:0 auto ,\u8fd9\u6837\u5c31\u80fd\u5c45\u4e2d \u3002
2 \u4e0b\u9762\u662f\u5b9e\u73b0 div\u5757\u7ea7\u5143\u7d20\u6c34\u5e73\u5c45\u4e2d \u7684\u4ee3\u7801 \uff1a\uff08\u5728\u4e0b\u9762\u7684\u4ee3\u7801 \u6211\u7684div \u5bbd\u5ea6200px \u9ad8\u5ea640px \u80cc\u666f\u989c\u8272\u662f\u84dd\u8272 \u6587\u5b57\u6c34\u5e73\u5c45\u4e2d\uff09 \u5176\u5b9e\u6ca1\u4ec0\u4e48\u7279\u522b\u597d\u89e3\u91ca\u7684 \u5c31\u662f\u4e00\u4e2a\u6837\u5f0f\uff0c\u662f\u56e0\u4e3a\u767e\u5ea6\u9ad8\u8d28\u91cf\u7684\u56de\u7b54 \u6211\u628a\u5f88\u7b80\u5355\u7684\u95ee\u9898\u518d\u89e3\u91ca\u4e86\u4e00\u904d\uff0c
div\u5728\u9875\u9762\u5c45\u4e2d
div{ width:200px;
height:40px;
background:blue;
text-align:center;
line-height:40px;
margin:0 auto ;
}
\u6211\u662f\u4e00\u4e2adiv \u6211\u73b0\u5728\u8981\u5c45\u4e2d
3 \u4e0b\u9762\u5c31\u662f\u663e\u793a\u6548\u679c\u5566 \uff1a
\u6c34\u5e73\u5c45\u4e2d\u6709\u4e24\u79cd\u60c5\u51b5\uff1a\u5b50\u5143\u7d20\uff0c\u7236\u7ea7\u5143\u7d20\u90fd\u662f\u5757\u7ea7\u5143\u7d20\u7684\u65f6\u5019\uff0c\u5b50\u7ea7\u5143\u7d20{margin:0 auto}\u3002\u9700\u8981\u6ce8\u610f\u7684\u662f\u5f53\u5b50\u7ea7\u5143\u7d20\u7684position\u4e3a\u975e\u9ed8\u8ba4\u53carelative\u65f6\uff0c\u8fd9\u79cd\u8bbe\u7f6e\u4f1a\u5931\u6548\u3002\u5982p\u7b49\u6807\u7b7e\u4e2d\u5185\u7684\u6587\u5b57\u5185\u5bb9\u6c34\u5e73\u5c45\u4e2d:\u4f7f\u7528{text-Align:center}\u3002\u5782\u76f4\u5c45\u4e2d\u8bbe\u7f6e\u8be5\u5143\u7d20\u7684\u884c\u9ad8\u7b49\u4e8e\u5143\u7d20\u7684\u9ad8\u3002\u5982\uff1a{height:100px;line-height:100px}\u53ef\u5b9e\u73b0\u3002\u6ce8\u610f\uff1a\u8fd9\u79cd\u65b9\u6cd5\u5e94\u7528\u4e8e\u884c\u5185\u5143\u7d20
1、主要的核心思想就是给div设置margin:0 auto ,这样就能居中 。
2、下面是实现 div块级元素水平居中 的代码 ：（在下面的代码 我的div 宽度200px 高度40px 背景颜色是蓝色 文字水平居中） 其实没什么特别好解释的 就是一个样式，是因为百度高质量的回答 我把很简单的问题再解释了一遍，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div在页面居中</title>
<style>
div{ width:200px;
height:40px;
background:blue;
text-align:center;
line-height:40px;
margin:0 auto ;
}
</style>
</head>
<body>
<div>我是一个div 我现在要居中</div>
</body>
</html>
绛旓細1 涓昏鐨勬牳蹇冩濇兂灏辨槸缁div璁剧疆margin:0 auto ,杩欐牱灏辫兘灞呬腑 銆2 涓嬮潰鏄疄鐜 div鍧楃骇鍏冪礌姘村钩灞呬腑 鐨勪唬鐮 锛氾紙鍦ㄤ笅闈㈢殑浠ｇ爜 鎴戠殑div 瀹藉害200px 楂樺害40px 鑳屾櫙棰滆壊鏄摑鑹 鏂囧瓧姘村钩灞呬腑锛 鍏跺疄娌′粈涔堢壒鍒ソ瑙ｉ噴鐨 灏辨槸涓涓鏍峰紡锛屾槸鍥犱负鐧惧害楂樿川閲忕殑鍥炵瓟 鎴戞妸寰堢畝鍗曠殑闂鍐嶈В閲婁簡涓閬嶏紝<!
绛旓細鍥哄畾楂樺害瀹炵幇姘村钩鍨傜洿灞呬腑鏂规硶涓鏈甯哥敤鐨勬柟娉曟槸浣跨敤height + line-height鐨勬柟寮忥紝璁剧疆鍚屾牱鐨勫硷紝閰嶅悎text-align鐨勪娇鐢紝鍗冲彲瀹炵幇鏂囨湰鐨勬按骞冲瀭鐩村眳涓榻<div class="container">Hello World锛</div>.container { width: 300px; height: 300px; line-height: 300px; text-align: center; border: 1px ...
绛旓細澶栭潰妗璁剧疆鍥哄畾瀹藉害锛岀劧鍚巐i涓嬮潰鐨刟鐨刢ss灞炴ц缃负锛鍧楃骇鍏冪礌 鐒跺悗缁檃鍥哄畾瀹藉害锛屽苟鍙缃唴鎴栧杈硅窛锛岀劧鍚庤鍏呮弧澶栨灏遍潬鎱㈡參璋冩暣a涓婇潰鐨勫搴﹀拰鍐呭杈硅窛銆
绛旓細1銆佽璁剧疆鍏冪礌涓烘枃鏈佸浘鐗囩瓑琛屽唴鍏冪礌鏃讹紝姘村钩灞呬腑鏄氳繃缁欑埗鍏冪礌璁剧疆 text-align:center 鏉ュ疄鐜扮殑銆2銆佸綋琚缃厓绱犱负鍧楃姸鍏冪礌鏃剁敤 text-align锛歝enter 灏变笉璧蜂綔鐢ㄤ簡銆傛弧瓒冲畾瀹藉拰鍧楃姸涓や釜鏉′欢鐨勫厓绱犳槸鍙互閫氳繃璁剧疆鈥滃乏鍙砿argin鈥濆间负鈥渁uto鈥濇潵瀹炵幇灞呬腑鐨勩3銆佷负闇瑕佽缃殑灞呬腑鐨勫厓绱犲闈㈠姞鍏涓涓 tab...
绛旓細鏂规硶1鍜屾柟娉2閮藉湪澶勭悊span鏍囩鏄剧ず鏂瑰紡,span鏍囩榛樿鏄鍐呭厓绱,濡傛灉缁欏畠璁剧疆浜唂loat鎴杁ispaly:block灞炴у氨鑳借瀹冭浆涓哄潡绾у厓绱,line-height璁剧疆琛岄珮,璁剧疆瀹冨悗鏂囧瓧浼氬瀭鐩村眳涓,text-align:center璁剧疆鏂囧瓧姘村钩灞呬腑,杩欐牱杈惧埌鑷繁鐨勯渶姹 鏂规硶3鍒╃敤鍐呰竟璺濊繘琛岃缃,padding:5px 20px(瀹屾暣鍐欐硶:padding:5px 20px ...
绛旓細1. 閫氳繃CSS鐨刴argin灞炴у疄鐜板眳涓 杩欐槸涓绉嶅父瑙佺殑鏂规硶锛屼富瑕侀氳繃璁剧疆宸﹀彸margin涓篴uto鏉ュ疄鐜般傞鍏堬紝缁欏唴灞傜殑div璁剧疆涓涓瀹藉害锛岀劧鍚庡皢鍏跺乏鍙砿argin璁剧疆涓篴uto锛岃繖鏍锋祻瑙堝櫒浼氳嚜鍔ㄨ绠楀乏鍙充袱渚х殑绌洪棿锛屼娇div姘村钩灞呬腑銆備緥濡傦細css .inner-div { width: 50%; /* 鎴栬呭叾浠栧浐瀹氱殑瀹藉害鍊 */ margin-left: ...
绛旓細鍦–SS涓紝鍙互浣跨敤text-align灞炴ф潵璁╂枃瀛姘村钩灞呬腑銆倀ext-align灞炴ц瀹氬厓绱犱腑鐨勬枃鏈殑姘村钩瀵归綈鏂瑰紡锛岃缃间负center鍒欏彲瀹炵幇鏂囨湰鏂囧瓧姘村钩灞呬腑瀵归綈銆倀ext-align灞炴ч氳繃鎸囧畾琛屾涓庡摢涓偣瀵归綈锛屼粠鑰璁剧疆鍧楃骇鍏冪礌鍐呮枃鏈殑姘村钩瀵归綈鏂瑰紡銆傞氳繃鍏佽鐢ㄦ埛浠ｇ悊璋冩暣琛屽唴瀹逛腑瀛楁瘝鍜屽瓧涔嬮棿鐨勯棿闅旓紝鍙互鏀寔鍊糺ustify锛涗笉鍚...
绛旓細浜屻佷娇鐢╩argin:0 auto;姘村钩灞呬腑 鍓嶆彁锛 缁鍏冪礌璁惧畾浜嗗搴﹀拰鍏锋湁display锛歜lock锛涚殑鍧楃骇鍏冪礌銆 璁涓涓狣IV姘村钩灞呬腑锛屽彧瑕璁剧疆浜咲IV鐨勫搴︼紝鐒跺悗浣跨敤margin锛0 auto锛宑ss鑷姩绠楀嚭宸﹀彸杈硅窛锛屼娇寰桪IV灞呬腑銆備笁銆佸畾浣嶅疄鐜板眳涓(闇璁＄畻鍋忕Щ鍊) 鍘熺悊: 閫氳繃瀹氫綅浣垮厓绱犲乏涓婅灞呬腑锛屽啀閫氳繃鍋忕Щ鍊糾argin璋冩暣浣垮厓绱犱腑蹇...
绛旓細姘村钩灞呬腑鏈変袱绉嶆儏鍐碉細瀛愬厓绱狅紝鐖剁骇鍏冪礌閮芥槸鍧楃骇鍏冪礌鐨勬椂鍊欙紝瀛愮骇鍏冪礌{margin:0 auto}銆傞渶瑕佹敞鎰忕殑鏄綋瀛愮骇鍏冪礌鐨刾osition涓洪潪榛樿鍙妑elative鏃讹紝杩欑璁剧疆浼氬け鏁堛傚p绛夋爣绛句腑鍐呯殑鏂囧瓧鍐呭姘村钩灞呬腑:浣跨敤{text-Align:center}銆傚瀭鐩村眳涓缃鍏冪礌鐨勮楂樼瓑浜庡厓绱犵殑楂樸傚锛歿height:100px;line-height:100px...
绛旓細鏂规硶涓:瀹氫箟div鐨勫搴︼紝娣诲姞鏍峰紡杈硅窛:0auto 绀轰緥:鏍囩甯哥敤浜庣粍鍚鍧楃骇鍏冪礌锛屼互渚块氳繃鏍峰紡琛ㄦ潵瀵硅繖浜涘厓绱犺繘琛屾牸寮忓寲銆俻>鍙畾涔夋枃妗ｄ腑鐨勫垎鍖烘垨鑺(pision/section)銆DIV鏄潡鐘舵爣绛撅紝瀹冮噷杈瑰彲浠ユ斁缃甌ABLE绛夊悇绉嶆ā鍧椼傝鐧戒簡锛屼富瑕佸氨鏄敤鏉ョ綉椤靛竷灞鐨勶紝褰撶劧锛岀綉椤电殑姣涓鍧楀唴瀹归兘鍙互浣跨敤鍒板畠锛屽畠浣跨敤鐨勬柟娉曚篃涓...
