鏍规嵁浠ヤ笂缁撴瀯锛岄€氳繃css瀹炵幇姘村钩鍜屽瀭鐩村眳涓€傜粷瀵瑰畾浣嶆槸鍒╃敤鐖跺厓绱犵殑鐩稿瀹氫綅鍜屽瓙鍏冪礌鐨勭粷瀵瑰畾浣嶆潵杩涜姘村钩鍜屽瀭鐩村眳涓€傜湅浣犳槸鍚︾煡閬撳瓙鍏冪礌鐨勫楂橈紝鐢ㄦ暟鍊兼垨鑰呯櫨鍒嗘瘮鏉ュ畾浣嶃€傛柟娉?.father{width:100px;楂樺害锛?00px锛涜儗鏅壊锛氱伆鑹诧紱浣嶇疆锛氱浉瀵癸紱}.child{瀹藉害锛?0px锛涢珮搴︼細20px锛涜儗鏅壊锛氱孩鑹诧紱浣嶇疆锛氱粷瀵癸紱宸︼細0锛涘彸锛?锛涢《閮細0锛涘簳閮細0锛沵argin:auto;}鏄€氳繃灏嗗洓鍚戣缃负0鍜宮argin:auto鏉ュ疄鐜扮殑銆傛柟娉?.father{width:100px;楂樺害锛?00px锛涜儗鏅壊锛氱伆鑹诧紱浣嶇疆锛氱浉瀵癸紱}.child{瀹藉害锛?0px锛涢珮搴︼細20px锛涜儗鏅壊锛氱孩鑹诧紱浣嶇疆锛氱粷瀵癸紱宸︼細50%锛涢《閮細50%锛沵argin:-10px-25px;}閫氳繃璁剧疆left鍜宼op锛屽皢child鐨勫乏涓婅绉诲姩鍒颁腑闂达紝鐒跺悗绉诲姩鑷繁鐨剋idth鍜宧eight锛屼娇child鐨勪腑蹇冪偣灞呬腑銆傛柟娉?.father{width:100px;楂樺害锛?00px锛涜儗鏅壊锛氱伆鑹诧紱浣嶇疆锛氱浉瀵癸紱}.child{瀹藉害锛?0px锛涢珮搴︼細20px锛涜儗鏅壊锛氱孩鑹诧紱浣嶇疆锛氱粷瀵癸紱宸︼細50%锛涢《閮細50%锛泃ransform:translate(-50%,-50%);}鏂规硶4.father{width:100px;楂樺害锛?00px锛涜儗鏅壊锛氱伆鑹诧紱浣嶇疆锛氱浉瀵癸紱}.child{瀹藉害锛?0px锛涢珮搴︼細20px锛涜儗鏅壊锛氱孩鑹诧紱浣嶇疆锛氱粷瀵癸紱宸︼細50%锛涢《閮細50%锛泃ransform:translate(-25px,-10px);}鎬荤粨涓€涓嬭繖浜涙柟娉曚娇鐢ㄧ粷瀵瑰畾浣嶏紝margin鎴栬€卼ransform鏉ヨ瀛愬厓绱犳按骞冲拰鍨傜洿灞呬腑锛屾牴鎹綘鏄惁鐭ラ亾鍏蜂綋鐨勫搴︽垨鑰呴珮搴︽潵浣跨敤margin鎴栬€卼ransform銆傚脊妗嗘柟娉?.father{width:100px;楂樺害锛?00px锛涜儗鏅壊锛氱伆鑹诧紱鏄剧ず锛歠lex;}.child{瀹藉害锛?0px;楂樺害锛?0px锛涜儗鏅壊锛氱孩鑹诧紱margin:auto;}鏂规硶6.father{width:100px;楂樺害锛?00px锛涜儗鏅壊锛氱伆鑹诧紱鏄剧ず锛氬脊鎬э紱璇佹槑鍐呭锛氬眳涓紱瀵归綈椤圭洰锛氬眳涓紱}.child{瀹藉害锛?0px锛涢珮搴︼細20px锛?}鎬荤粨杩欎袱涓兘鏄娇鐢╢lex寮规€х洅瀛愬竷灞€瀹炵幇鐨勩€傞殢鐫€娴忚鍣ㄥ吋瀹规€х殑鏅強锛屽脊鎬х洅瀛愯秺鏉ヨ秺鍙楁杩庛€傝〃鏍煎崟鍏冩牸鏂规硶7.father{width:100px;楂樺害锛?00px锛涜儗鏅壊锛氱伆鑹诧紱鏄剧ず锛氳〃鏍煎崟鍏冩牸锛涙枃鏈榻愶細灞呬腑锛泇ertical-align:middle;}.child{display:inline-block;瀹藉害锛?0px锛涢珮搴︼細20px锛沚ackground-color:red;}浣跨敤table-cell鍜岃鍐呭潡鍏冪礌瀹炵幇琛屽唴鍏冪礌鏂规硶8.father{width:100px;楂樺害锛?00px锛涜儗鏅壊锛氱伆鑹诧紱text-align:center;}.child{display:inline-block;瀹藉害锛?0px锛涢珮搴︼細20px锛涜儗鏅壊锛氱孩鑹诧紱vertical-align:middle;}.father:after{content:'';瀹藉害锛?锛?00%锛涙樉绀猴細鍐呰仈鍧楋紱vertical-align:middle;}浣跨敤浼厓绱犳墿灞曢珮搴﹀苟鍨傜洿灞呬腑銆傛柟娉?.father{width:100px;琛岄珮锛?00px锛涜儗鏅壊锛氱伆鑹诧紱text-align:center;}.child{display:inline-block;瀹藉害锛?0px锛涢珮搴︼細20px锛涜儗鏅壊锛氱孩鑹诧紱vertical-align:middle;}浣跨敤鐖跺厓绱爈ine-height鍜宨nline-block瀛愬厓绱爒ertical-align鍨傜洿灞呬腑鐨勭浉瀵瑰畾浣嶆柟娉?0.1銆?銆?涓轰粈涔堜竴瀹氳鐢╝bsolute瀹氫綅鏄笉鏄湁鐐硅糠鎯戯紝浣嗕笉鏄翰鎴氾紵绛旀鏄偗瀹氱殑銆傪煒?father{瀹藉害锛?00px;楂樺害锛?00px锛涜儗鏅壊锛氱伆鑹诧紱}.child{瀹藉害锛?0px锛涢珮搴︼細20px锛涜儗鏅壊锛氱孩鑹诧紱浣嶇疆锛氱浉瀵癸紱宸︼細50%锛涢《閮細50%锛泃ransform:translate(-50%,-50%);}鏂规硶11.father{width:100px;楂樺害锛?00px锛涜儗鏅壊锛氱伆鑹诧紱}.child{瀹藉害锛?0px锛涢珮搴︼細20px锛涜儗鏅壊锛氱孩鑹诧紱鍦ㄨ繖閲岋紝鎴戣寰楀ぇ瀹跺枩娆㈤棶鍨傜洿灞呬腑闂鐨勪富瑕佺洰鐨勬槸鑰冩煡澶у瀵瑰熀鏈琧ss銆佸畾浣嶃€佸竷灞€銆佸厓绱犵瓑鐨勭悊瑙ｏ紝姣斿鐩稿甯冨眬鍜岀粷瀵瑰竷灞€锛屾瘮濡傚潡绾у厓绱犲拰鍐呰仈鍏冪礌锛屾瘮濡係peakingofmargin鍜宲adding锛屾瘮濡傜櫨鍒嗘瘮寮曠敤锛屾瘮濡備吉鍏冪礌鐨勪娇鐢紝姣斿transform鐨勪娇鐢ㄧ瓑绛夈€傝妫€鏌ョ殑鏈€閲嶈鐨勪簨鎯呮槸浣跨敤鍜岀悊瑙ｈ繖浜涘熀纭€鐭ヨ瘑鐨勮兘鍔涖€傚苟涓嶆槸璇撮潰璇曞畼鐪熺殑鎯崇煡閬撲綘鐭ラ亾澶氬皯鍨傜洿灞呬腑鐨勬柟娉曪紝浠栧彧鏄兂浜嗚В闈㈣瘯瀹樼殑css鐨勫熀纭€鐭ヨ瘑銆?2.鐖朵翰{瀹藉害锛?00px锛涢珮搴︼細100px锛涜儗鏅壊锛氱伆鑹诧紱}.child{瀹藉害锛?0px锛涢珮搴︼細20px锛涜儗鏅壊锛氱孩鑹诧紱杈硅窛锛氳嚜鍔紱}.鐖朵翰锛氫箣鍓峽鍐呭锛氣€溾€濓紱瀹藉害锛?锛涢珮搴︼細璁＄畻锛?0%-10px锛夛紱鏄剧ず锛氬潡锛涘瀭鐩村榻愶細涓棿锛泒