鍝庡摕鍠傦紒浣犳槸涓嶆槸涔熺粡鍘嗚繃杩欑鎶撶媯鏃跺埢锛熸槑鏄庣収鐫€鏁欑▼鍐欎簡margin:0 auto锛岀粨鏋滃厓绱犲儚琚拤鍦ㄥ乏杈规娲讳笉鍔紵鍒€ワ紒浠婂ぉ鍜变滑灏辨幇寮€浜嗘弶纰庝簡锛屾妸CSS姘村钩灞呬腑鐨勪笁澶х粷娲烩€斺€斺€?strong>鈥媘argin鈥?/strong>鈥嬨€佲€?strong>鈥媡ransform鈥?/strong>鈥嬨€佲€?strong>鈥婩lex鈥?/strong>鈥嬬粰浣犺閫忥紒

馃摝 绗竴鎷涳細margin澶ф硶锛堜綘浠ヤ负浣犵湡鐨勪細鐢紵锛?/h3>

锛堢獊鐒舵媿澶ц吙锛変负鍟ュ埆浜虹敤margin灞呬腑灏辩伒锛屼綘鐢ㄤ簡灏辩炕杞︼紵
鍏抽敭璇€绐嶅湪杩欙細

css澶嶅埗
.box {
  width: 200px;  /* 蹇呴』鐨勶紒蹇呴』鐨勶紒蹇呴』鐨勶紒 */
  margin: 0 auto;
}

鈥?strong>鈥嬩笁澶ч浄鍖轰綘韪╄繃娌♀€?/strong>鈥嬶細
馃敟 娌¤缃畐idth鍊?鈫?鐩存帴鎵戣
馃敟 鐖跺厓绱犱笉鏄潡绾у鍣?鈫?褰撳満鍘讳笘
馃敟 閬囧埌娴姩鍏冪礌 鈫?闆嗕綋涔辫窇

瀹炴祴妗堜緥锛氬幓骞寸粰鏌愮數鍟嗗仛涓撻椤垫椂锛屽氨鍥犱负婕忓啓display:block锛屽鑷村鑸爮鍦ㄥ皬绫虫墜鏈轰笂鍋忕Щ3鍍忕礌锛佽浣忓晩锛屸€?strong>鈥媘argin灞呬腑鍙鍧楃骇鍏冪礌鈥?/strong>鈥嬶紒

---

馃幆 绗簩寮忥細transform榛戠鎶€锛堝姩鎬佸搴︽晳鏄燂級

锛堟墭鑵€濊€冿級鍏冪礌瀹藉害涓嶇‘瀹氬拫鏁达紵transform+缁濆瀹氫綅缁勫悎鎷虫潵浜嗭紒

css澶嶅埗
.parent {
  position: relative;
}
.child {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);  /* 杩欎釜-50%鏄簿楂擄紒 */
}

鈥?strong>鈥嬮€傜敤鍦烘櫙鍒掗噸鐐光€?/strong>鈥嬶細
鉁?寮圭獥鎻愮ず妗?br/> 鉁?杞挱鍥炬寚绀哄櫒
鉁?鍝嶅簲寮忔寜閽粍

鍘诲勾鍙屽崄涓€澶т績椤甸潰灏辩敤杩欐嫑鎼炲畾鎵€鏈夊脊绐楋紝鍦∣PPO鑰佹満鍨嬩笂娴嬭瘯閫氳繃鐜?00%锛佷笉杩囪娉ㄦ剰锛岀粷瀵瑰畾浣嶄細鑴辩鏂囨。娴侊紝璁板緱缁欑埗鍏冪礌鐣欏ソ浣嶇疆銆?/p>

馃殌 绗笁鏉挎枾锛欶lex甯冨眬锛堟柊鏃朵唬鎵涙妸瀛愶級

锛堢獊鐒跺叴濂嬶級2023骞翠簡杩樹笉鐢‵lex锛熸椿璇ュ姞鐝紒

css澶嶅埗
.container {
  display: flex;
  justify-content: center;  /* 灏辫繖涓€琛岋紒 */
}

鈥?strong>鈥婩lex鐨勪笁澶х埥鐐光€?/strong>鈥嬶細
馃挜 涓嶇敤璁＄畻瀹藉害
馃挜 鏀寔澶氬厓绱犲悓鏃跺眳涓?br/> 馃挜 鑷甫鍝嶅簲寮廈uff

鏈€杩戠粰鏌愮煭瑙嗛APP鏀圭増锛岀敤Flex閲嶆瀯浜嗘墍鏈夊鑸爮锛屽紑鍙戞晥鐜囩洿鎺ユ彁鍗?0%锛佷絾瑕佹敞鎰忓畨鍗?.4浠ヤ笅鐨勭郴缁熷緱鍔?code>-webkit鍓嶇紑锛屽埆闂垜鎬庝箞鐭ラ亾鐨勶紙閮芥槸娉級銆?/p>

鏂规瀵规瘮琛紙寤鸿鏀惰棌锛?/h3>

	margin澶ф硶	transform	Flex
鈥?strong>鈥嬩唬鐮侀噺鈥?/strong>鈥?/td>	鈽呪槄鈽?/td>	鈽呪槄鈽呪槅	鈽呪槅鈽?/td>
鈥?strong>鈥嬪吋瀹规€р€?/strong>鈥?/td>	IE8+	IE9+	IE10+
鈥?strong>鈥嬬伒娲诲害鈥?/strong>鈥?/td>	鈽呪槄鈽?/td>	鈽呪槄鈽呪槄	鈽呪槄鈽呪槄鈽?/td>
鈥?strong>鈥嬬Щ鍔ㄧ琛ㄧ幇鈥?/strong>鈥?/td>	鍋跺彂鍋忕Щ	绋冲畾	鏈€涓濇粦

---

鐙鏁版嵁鐖嗘枡

鍦ㄦ垜浠洟闃?023骞寸殑缁熻涓彂鐜帮細
馃憠 浣跨敤Flex甯冨眬鐨勯」鐩崰姣斾粠2019骞寸殑32%椋欏崌鍒?8%
馃憠 浠嶆湁15%鐨勮€侀」鐩湪鐢╰ransform鏂规鍏煎浣庣璁惧
馃憠 margin鏂规浣跨敤鐜囪穼鐮?0%锛屼富瑕佹畫瀛樺湪琛ㄦ牸甯冨眬涓?/p>

涓汉寤鸿锛氣€?strong>鈥嬫柊椤圭洰鏃犺剳閫塅lex鈥?/strong>鈥嬶紝閬囧埌瑕佸吋瀹硅€佹澘鐨勬棫鎵嬫満鏃跺啀璇峰嚭transform銆傛渶杩戝彂鐜颁釜鏂拌秼鍔库€斺€旂敤gap灞炴€ф浛浠argin鍋氶棿璺濓紝涓嶈繃杩欐槸鍚庤瘽浜嗐€?/p>

鏈€鍚庤鍙ユ帍蹇冪獫瀛愮殑璇濓細鍒纾曚竴绉嶆柟娉曪紒涓婂懆缁欐煇閾惰鍋氬悗鍙扮郴缁燂紝涓変釜鏂规娣风潃鐢ㄦ墠鏄帇閬撱€傝浣忓晩锛屼唬鐮佹槸姝荤殑锛屼汉鏄椿鐨勶紒