在html中，使用margin屬性設(shè)置圖片居中，只需要給圖片元素設(shè)置“margin:auto”樣式即可。當(dāng)margin屬性值為“auto”時(shí)，瀏覽器會(huì)自動(dòng)分配左右邊距，使元素平均分配占用父級(jí)容器的左右邊距，達(dá)到元素居中的目的。。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

在Body標(biāo)簽下建立img標(biāo)簽，將圖片插入到文檔中，現(xiàn)在可以看到圖片在瀏覽器的左上角顯示，現(xiàn)在這里引用的圖片大小為200*125px

<img src="img/1.jpg" alt="圖片">

可以在img外建立div塊狀標(biāo)簽，然后對(duì)div設(shè)定寬度，將文件居中設(shè)置 margin:0 auto;

<div>         <img src="img/1.jpg" alt="圖片"> </div>

還可以將圖片設(shè)置為相對(duì)定位，然后對(duì)其以百分比的方式將其居中，

div{         position:relative;         left:50%;     }

在瀏覽器中預(yù)覽效果，因?yàn)樵O(shè)置的的是距離左側(cè)50%的距離，所以現(xiàn)在的圖片左側(cè)位置在文檔中的居中位置，

如果將圖片正中心居中，就需要將圖片向左側(cè)移動(dòng)圖片寬度一半的距離，所以一定要知道圖片的大小才可以，現(xiàn)在這張圖片大小為200*125，所以講圖片框向左移動(dòng)100px即可，因?yàn)橄蛲鈧?cè)移動(dòng)，所以給負(fù)值 left:-100px;最后效果如圖，已經(jīng)將圖片居中對(duì)齊，這樣設(shè)置后，不管屏幕多大，圖片都是在居中位置。

div{         position:relative;         left:50%;         margin-left: -100PX;     }

推薦學(xué)習(xí)：html視頻教程