HTML中设置水平居中的几种方法
在制作网页的过程中，我们经常会遇到需要设置水平居中的情况，比如文字标题居中，表格居中等，所以今天我们就给大家讲解一下如何设置水平居中。
首先，居中的元素可以分类为行内元素和块状元素，其中块状元素又可以分为定宽块状元素和不定宽块状元素。 常见的行内元素为：spanbriemstrongqcodea等。 常见的块级元素为：phxhrdivuloltableform等。
对于行内元素，如果被设置居中的元素是文字或者图形的形式，那就需要通过给父元素设置text-align：center来实现。
对于定宽的块级元素，使用text-align：center就无效了。这里如果需要设置居中，则必须通过设置左右两边的margin值为“auto”来实现。auto的意思是自动分配剩余空间，margin：10px auto是margin-top：10px；margin-bottom：10px；margin-left：auto；margin-right：auto；的缩写形式。所以左右两边元素剩余区域各自均分，也就是元素两侧的区域各占50%，那么元素就左右居中了。
对于宽度不固定的块级元素，通常有3种方式来实现居中：第一种是通过table元素来实现；第二种是设置display: inline方法，将显示类型设为行内元素；第三种是设置position:relative，利用相对定位的方式，将元素向左偏移50%来实现居中。 table元素具有长度自适应性，其长度根据其内文本长度决定，因此可以看做一个定宽度块元素。然后结合上面的定宽块级元素居中方法就可以设置居中了。 这种方法的缺点是会生成无语义的代码。
设置display：inline方法来居中不定宽块级元素则更好理解，通过将元素设置为行内元素，设置行内元素的父元素属性text-align:center就可以实现居中。 此方法的缺点是由于转换成了行内元素，导致元素损失了块级元素具有长度值等属性。
最后一种利用相对定位的方式来居中不定宽块级元素，首先给父元素设置float属性，然后给父元素设置relative定位属性，left:50%；子元素也设置relative定位属性和left:-50%，这样就能实现居中。
绛旓細鍦℉TML涓紝鏈夊嚑绉嶆柟娉曞彲浠ュ皢鏂囨湰姘村钩灞呬腑銆傚父瑙佺殑鏂规硶锛1銆佷娇鐢╰ext-align锛歝enter锛涙牱寮忋2銆佷娇鐢╢lexbox銆3銆佷娇鐢╣rid甯冨眬銆4銆佷娇鐢℉TML鐨刟lign灞炴с5銆佷娇鐢–SS鐨則ransform灞炴с
绛旓細瑕佽鏂囧瓧鍦℉TML缃戦〉涓眳涓紝浣犲彲浠ヤ娇鐢–SS鏉ヨ缃枃鏈殑灞呬腑瀵归綈鏂瑰紡銆備互涓嬫槸鍑犵甯歌鐨勬柟娉曪細鏂囨湰姘村钩灞呬腑锛氫娇鐢–SS鐨則ext-align灞炴ф潵姘村钩灞呬腑鏂囨湰銆傚皢璇ュ睘鎬у簲鐢ㄤ簬鍖呭惈鏂囨湰鐨凥TML鍏冪礌锛屽<div>鎴<p>銆<style>.center-text { text-align: center;}</style><div class="center-text">杩欐槸灞呬腑鐨...
绛旓細瀵逛簬瀹藉害涓嶅浐瀹氱殑鍧楃骇鍏冪礌锛閫氬父鏈3绉嶆柟寮忔潵瀹炵幇灞呬腑锛氱涓绉嶆槸閫氳繃table鍏冪礌鏉ュ疄鐜帮紱绗簩绉嶆槸璁剧疆display: inline鏂规硶锛屽皢鏄剧ず绫诲瀷璁句负琛屽唴鍏冪礌锛涚涓夌鏄缃畃osition:relative锛屽埄鐢ㄧ浉瀵瑰畾浣嶇殑鏂瑰紡锛屽皢鍏冪礌鍚戝乏鍋忕Щ50%鏉ュ疄鐜板眳涓 table鍏冪礌鍏锋湁闀垮害鑷傚簲鎬э紝鍏堕暱搴︽牴鎹叾鍐呮枃鏈暱搴﹀喅瀹氾紝鍥犳鍙互鐪嬪仛...
绛旓細涓嬮潰浠嬬粛鍏充簬html鍏冪礌姘村钩灞呬腑鐨勫嚑绉嶆柟寮 1銆佸浜庤鍐呭厓绱犻噰鐢╰ext-align:center;鐨勬柟寮 2銆侀噰鐢╩argin:0 auto;鏉ュ疄鐜版按骞冲眳涓樉绀 3銆佺敤table瀹炵幇 4銆佸潡绾х殑鍏冪礌浣嗘槸閫氳繃杞崲鎴愯鍐呭厓绱犳潵瀹炵幇鍧楃骇鍏冪礌鐨勬按骞冲眳涓樉绀 5銆佺埗瀛愬厓绱犻兘閲囩敤鐩稿瀹氫綅锛岀埗鍏冪礌left:50%;瀛愬厓绱爈eft:-50%;鐩稿鑷繁鐨勯暱搴﹀噺鍥...
绛旓細鏈瘒浠嬬粛HTML涓浣曡缃按骞冲眳涓1銆佺涓绉嶅畾瀹藉潡鐘跺厓绱犳按骞冲眳涓傝缃滃乏鍙砿argin鈥濆间负鈥渁uto鈥濇潵瀹炵幇灞呬腑銆備唬鐮佸鍥俱2銆佹祻瑙堝櫒鏌ョ湅缁撴灉濡傚浘鎵绀恒3銆佺浜岀涓嶅畾瀹藉厓绱犮傝缃殑灞呬腑鐨勫厓绱犲闈㈠姞鍏ヤ竴涓猼able鏍囩銆備负杩欎釜table璁剧疆宸﹀彸margin灞呬腑銆備唬鐮佸鍥俱4銆佺粨鏋滄樉绀哄鍥炬墍绀恒5銆佺涓夌涓嶅畾瀹藉潡...
绛旓細姘村钩灞呬腑锛氳鍐呭厓绱狅細鍙互鐖剁骇鍒╃敤text-align: center;杩涜姘村钩灞呬腑 鍧楃骇鍏冪礌锛氣憼鍙互鍒╃敤margin: 0 auto;杩涜姘村钩灞呬腑 鈶′娇鐢╬osition鍐冲畾瀹氫綅 鍒╃敤margin-left杩涜宸﹀亸绉 鍒╃敤transform杩涜宸﹀亸绉 鈶娇鐢╢lex甯冨眬 鍨傜洿灞呬腑锛氬唴鑱斿厓绱狅細鍙互浣跨敤line-height杩涜鍨傜洿灞呬腑 鍧楃骇鍏冪礌锛氣憼浣跨敤position瀹氫綅 鍒╃敤...
绛旓細html灞呬腑鐨鏂规硶濡備笅锛1銆佹墦寮HTML鐨缂栬緫鍣ㄣ2銆佹壘鍒伴渶瑕佸眳涓殑鍥剧墖鎴栬呮枃瀛椼3銆佸湪body閲岄潰锛璁剧疆CSS鏍峰紡銆4銆佹坊鍔犳牱寮忎负锛歵ext-align锛歝enter 锛涘嵆鍙傝秴鏂囨湰鏍囪璇█锛圚yper Text Markup Language锛夛紝缂╁啓涓篐TML锛屾爣鍑嗛氱敤鏍囪璇█涓嬬殑涓涓簲鐢ㄣ侶TML涓嶆槸涓绉嶇紪绋嬭瑷锛岃屾槸涓绉嶆爣璁拌瑷 锛坢arkup ...
绛旓細瀹瑰櫒鐨灞呬腑鏄剧ず鍦ㄧ綉椤佃璁′腑鏄緢甯歌鐨勶紝灞呬腑鏄剧ず鍙互鑾峰緱瑙嗚鐨勭劍鐐癸紝鏄唴瀹规洿鍔犵獊鍑猴紝涓嬮潰灏辩畝鍗曠殑璇存槑涓涓嬪浣曞湪HTML涓閫氳繃鏍峰紡鐨勬帶鍒舵潵瀹炵幇 1銆佹渶甯歌鐨勪竴绉嶏紝浠ｇ爜绀轰緥濡備笅鍥撅紝棣栧厛锛屽彇big涓鍗婂儚绱犲ぇ灏忚祴缁檚mall灞傦紝閫氳繃margin: 0 auto; text-align: center鏉ュ疄鐜 2銆佺浜岀鏂规硶锛屼唬鐮佺ず渚嬪涓嬪浘锛...
绛旓細1銆侀鍏堟垜浠噯澶囧ソ涓涓┖鐨刪tml缁撴瀯鐨勬枃妗ｃ2銆佹帴涓嬫潵鎴戜滑瑕佸噯澶囩殑鏄噯澶囦竴涓猵鐢ㄦ潵鏀惧唴瀹逛簡锛岃繖閲屼负浜嗘樉绀虹壒鎰忕粰p璁剧疆浜嗚竟妗嗐3銆佹帴涓嬫潵鎴戜滑灏卞湪p涓坊鍔犲唴瀹癸紝杩愯鍚庝綘浼氬彂鐜板唴瀹瑰亸鍚戜簬宸︿笂瑙掋4銆佷笅闈㈡垜浠粰p璁剧疆姘村钩灞呬腑锛屽苟涓旇缃楂樹负p鐨勯珮搴︼紝浣犱細鍙戠幇瀹冩按骞冲瀭鐩村眳涓簡銆俬5涓璸涓枃瀛楁庢牱灞呬腑锛...
绛旓細2銆佹帴涓嬫潵闇瑕佸湪head鏍囩涓嬫柟寮曞叆jquery.min.js鎻掍欢銆3銆佸湪椤甸潰鐨刡ody鏍囩閲岋紝鏂板缓涓涓猵锛屽悕绉颁负test銆4銆佸湪body鏍囩涓嬫柟鍐欎笂script>/script>,鐢ㄦ潵瀛樻斁js浠ｇ爜銆傞氳繃class瀹氫綅鍒皃锛岄氳繃css()鏂规硶璁╂枃瀛灞呬腑銆5銆佸湪娴忚鍣ㄤ腑鎵撳紑test.html锛屽彲浠ュ湪鏂囧瓧鍦ㄩ〉闈腑闂存樉绀恒俬tml濡備綍璁剧疆缃戦〉椤甸潰灞呬腑锛熷彧闇瑕佽缃...
