這篇文章將為大家詳細講解有關html設置圖片居中的方法，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
在html中，使用margin屬性設置圖片居中，只需要給圖片元素設置“margin:auto”樣式即可。當margin屬性值為“auto”時，瀏覽器會自動分配左右邊距，使元素平均分配占用父級容器的左右邊距，達到元素居中的目的。。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
在Body標簽下建立img標簽，將圖片插入到文檔中，現在可以看到圖片在瀏覽器的左上角顯示，現在這里引用的圖片大小為200*125px
<img src="img/1.jpg" alt="圖片">
可以在img外建立div塊狀標簽，然后對div設定寬度，將文件居中設置 margin:0 auto;
<div> <img src="img/1.jpg" alt="圖片"> </div>
還可以將圖片設置為相對定位，然后對其以百分比的方式將其居中，
div{
position:relative;
left:50%;
}在瀏覽器中預覽效果，因為設置的的是距離左側50%的距離，所以現在的圖片左側位置在文檔中的居中位置，
如果將圖片正中心居中，就需要將圖片向左側移動圖片寬度一半的距離，所以一定要知道圖片的大小才可以，現在這張圖片大小為200*125，所以講圖片框向左移動100px即可，因為向外側移動，所以給負值 left:-100px;最后效果如圖，已經將圖片居中對齊，這樣設置后，不管屏幕多大，圖片都是在居中位置。
div{
position:relative;
left:50%;
margin-left: -100PX;
}
關于“html設置圖片居中的方法”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
