Posted 2021-04-09 娌堝織鍕囪

璁╀竴涓猟iv鎴栬€呬竴娈垫枃瀛椾害鎴栬€呬竴寮犵収鐗囧眳涓樉绀虹殑闂锛岄潰璇曠殑杩囩▼涓篃缁忓父琚棶鍒般€?/span>鐩镐俊澶у閮芥棩甯哥殑甯冨眬涔熺粡甯镐細鐢ㄥ埌锛屽洖绛斿嚭涓笁涓ょ瑙ｅ喅鏂规浜︿笉鏄毦浜嬨€?/span>浣嗕粖澶╂垜缁嗙┒浜嗕竴涓嬶紝鍙戠幇杩樻湁鏂板ぇ闄嗗彲瀵伙紝鐗规剰鐣欐鍗氭枃鎬荤粨涓€涓嬶紝涓庡悰鍒嗕韩锛?/span>濡傛灉浣犳湁鏂扮殑鏂规硶锛屾杩庤ˉ鍏咃紒馃憦馃憦馃憦

鎴戜滑鍏堜粠鍥哄畾瀹介珮鐨刣iv寮€濮?/span>

涓烘柟渚挎紨绀猴紝榛樿瀹介珮鍚勪负100px鐨刣iv

<div class="wrapper"> <div class="content"></div></div>

浠ヤ笅鏂瑰紡鍏ㄩ儴鏄按骞冲強鍨傜洿灞呬腑

鏂规硶涓€锛歱adding濉厖

.content{ margin: 0 auto; padding: 50px; width: 100px; height: 100px; background-color: red;}

浼樼偣锛氬吋瀹规€ч潪甯稿ソ

缂虹偣锛氬鏋滅埗绾х殑楂樺害鍙楀埌鍏勫紵鑺傜偣鐨勫奖鍝嶏紝杩欐牱鑷繁灏变笉灞呬腑浜?/p>

鏂规硶浜岋細缁濆瀹氫綅

.wrapper{ position: relative;}  .content{ position: absolute; left: 50%; top: 50%; margin-top: -50px; margin-left: -50px; width: 100px; height: 100px; background-color: red; }

浼樼偣锛氬吋瀹规€ч潪甯稿ソ

缂虹偣锛氶渶瑕佹彁鍓嶇煡閬揹iv鐨勫楂橈紝瀹炵敤鎬у亸寮?/p>

鏂规硶涓夛細璁＄畻灞炴€э紙calc锛?/span>

.content{  margin: calc((100% - 100px) / 2); width: 100px; height: 100px;  background-color: red; }

浼樼偣锛氭劅瑙変笉鍒版湁浠€涔堜紭鐐?/p>

缂虹偣锛氫笉浠呴渶瑕佹彁鍓嶇煡閬揹iv鐨勫楂橈紝鑰屼笖娴忚鍣ㄥcalc鐨勫睘鎬ф敮鎸佺▼搴︿笉涓€锛屼細鏈夊吋瀹归棶棰樸€備笉鎺ㄨ崘浣跨敤锛屽缓璁綔涓轰簡瑙?/p>

鎺ヤ笅鏉ユ槸涓嶅浐瀹氬楂樼殑div

涓烘柟渚挎紨绀猴紝杩樻槸榛樿瀹介珮鍚勪负100px鐨刣iv

鏂规硶鍥涳細absolute + margin: auto;

.wrapper{ position: relative; }.content{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 100px; height: 100px; background-color: red;}

浼樼偣锛氫笉闇€瑕佹彁鍓嶇煡閬撳昂瀵革紝鍏煎鎬уソ

缂虹偣锛氭殏鏃舵病鏈変粈涔堣璇寸殑锛屽彲鑳界悊瑙ｈ捣鏉ユ瘮杈冮夯鐑﹀惂

瑙ｆ瀽锛?/p>

1銆佹垜浠厛璁ヽontent鑴辩鏂囨。娴侊紝鐒跺悗璁剧疆涓婂彸涓嬪乏鍥涗釜浣嶇疆鍧囦负0

2銆佺粰瀹冨浐瀹氬楂橈紝闄愬埗澶у皬

3銆佸埄鐢╩argin灞炴€э紝鍧囧垎澶栬竟璺?/p>

鏂规硶鍥涳細absolute + transform

.content{ position: absolute; left: 50%; top: 50%; width: 100px; height: 100px; transform: translate(-50%,-50%); background-color: red; }  

浼樼偣锛氶櫎浜嗕笉鐢ㄦ彁鍓嶇煡閬撳ぇ灏忓ソ鍍忎篃娌′粈涔堜簡

缂虹偣锛氬吋瀹规€у亸寮?/p>

鏂规硶浜旓細鐖剁骇flex甯冨眬

.wrapper{ display: flex; justify-content: center; align-items: center;}

浼樼偣锛氬啓娉曟瀬搴︾畝鍗曟槑浜?/p>

缂虹偣锛氬氨鏄吋瀹规€у亸宸紝鏈潵瀹冨彲鑳芥槸瑙ｅ喅灞呬腑鐨勭帇閬擄紙涓汉瑙傜偣锛?/p>

鏂规硶鍏細鐖剁骇table甯冨眬

.wrapper{ display: table-cell; vertical-align: middle;}
.content{ margin: 0 auto;}

浼樼偣锛氬啓娉曟瀬搴︾畝鍗曟槑浜?鍏煎鎬ф瀬濂?/p>

缂虹偣锛氬氨鏄湁鐐硅€佷簡

杩樻湁涓€涓洿鍙よ€侊紙鏈夋瘨锛夌殑鎯虫硶锛?span class="mq-29">

<table style="table-layout:fixed; width: 400px;"> <tr> <td height="400" align="center" valign="middle"> <div class="content"></div> </td> </tr> </table>

璇达紒浣犱滑鏄笉鏄兂璇?

鏂规硶涓冿細浼厓绱?/span>

.wrapper{ width: 400px; height: 400px; text-align: center; border: 2px solid blue;}.wrapper:after{ content: ''; display: inline-block; height: 100%; vertical-align: middle;}

.content{ display: inline-block; vertical-align: middle; width: 100px; height: 100px; background-color: red;}

    

鏂规硶鍏細浼厓绱犵殑鍙﹀涓€绉嶅疄鐜版柟寮忥紙鍏勫紵鑺傜偣锛?/span>

html:

<div class="wrapper">  <div class="content"></div>  <div class="brother"></div> </div>

style:

.wrapper{ width: 400px; height: 400px; text-align: center; border: 2px solid blue;} .content, .brother { display: inline-block; vertical-align: middle;}.content { width: 100px; height: 100px; background-color: red;} .brother { height: 400px; }

璇村疄璇濓紝鎴戜篃涓嶇煡閬撹繖鏄负浠€涔堬紝銆奀SS涓栫晫銆嬬鍥涚珷鍦ㄨ瑙ｈ繖涓紝濡傛灉鏈夐渶瑕丳DF鎹㈢淇℃垜鍝︼紒鎴戣璺戞鍘讳簡锛屾亹鎬曟病鏈夋椂闂翠簡锛屼笅娆＄煡閬撳師鍥犲啀缁欏瑙ｆ瀽鍚э紝鎴栬€呰瘎璁哄憡璇夋垜銆?/p>

鏂规硶涔濓細line-heght锛堜粎闄愬崟琛屾枃瀛楀瀭鐩村眳涓?

.wrapper {

   height: 400px;

   line-height: 400px;

   border: 1px solid red;

}

img灞呬腑

濡傚悓杩欐牱鐨勬晥鏋滐細

鍏跺疄涓婇潰鐨勬柟娉曚竴閬撳叓鍙橀€氫竴涓嬶紝閮藉彲浠ュ疄鐜板浘鐗囩殑灞呬腑锛岃繖閲屽啀鍒嗕韩涓€涓鎶€娣阀锛?br>

.wrapper{ width: 400px; height: 400px; text-align: center; border: 2px solid blue; background-image: url('./bg.jpg'); background-repeat: no-repeat; background-position: center;}

灏辨槸background-position锛歝enter

鐮佸瓧涓嶆槗锛屽垱閫犳洿涓嶆槗锛岄夯鐑﹀ぇ瀹剁粰涓€涓叧娉ㄥ惂锛?/p>