HTML5圖片居中的代碼

在HTML5中，我們可以使用一些CSS屬性來將圖片居中顯示。

img {
display: block;
margin: auto;
}

以上代碼中，display: block;讓圖片變為塊級元素，寬度變為100%；margin: auto;使圖片的左右margin值為auto，即水平居中。

如果要讓圖片垂直居中，可以使用以下代碼。

.container {
position: relative;
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

以上代碼中，.container是圖片所在的容器，需要設置為相對定位；position: absolute;讓圖片絕對定位；top: 50%;將圖片上邊距設置為容器高度的50%，將圖片移動到垂直居中位置；left: 50%;將圖片左邊距設置為容器寬度的50%，將圖片移動到水平居中位置；transform: translate(-50%, -50%);讓圖片整體向左、向上移動50%，讓圖片完全垂直水平居中。

通過以上代碼，我們可以輕松實現HTML5圖片的居中顯示效果。