今天我們來聊一下html css圖片居中的代碼技巧。 首先，我們需要將img標簽放在一個div容器里，這樣才能進行樣式的設置。接下來，我們可以使用如下代碼來將圖片水平垂直居中：

/*給外層容器設置相對定位*/
.container {
position: relative;
}
/*將圖片絕對定位，且向外偏移一半的寬高，以實現垂直水平居中*/
.container img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

上述代碼中，我們使用了相對定位和絕對定位相結合的方式，先給外層容器設置相對定位，再使用絕對定位將圖片偏移至父元素的中心位置，細心的讀者會發現代碼中使用了transform屬性來實現偏移功能，這是因為使用margin負值會使原有內容被遮擋，而使用transform則不會。 當然，有時候我們還需要給圖片設置最大寬度或最大高度，并保持圖片寬高比例不變。此時可以使用如下代碼：

/*給外層容器設置相對定位*/
.container {
position: relative;
}
/*將圖片絕對定位，且向外偏移一半的寬高，以實現垂直水平居中*/
.container img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
max-height: 100%;
}

上述代碼中，我們添加了max-width和max-height屬性，使圖片寬度和高度不超過容器的寬度和高度，同時使用transform屬性實現圖片的居中效果。 總結一下，要實現html css圖片居中的效果，我們需要將圖片放在一個div容器中，使用相對定位和絕對定位相結合的方式將圖片偏移至父元素的中心位置，同時要注意保持圖片寬高比例不變。希望本文對您有所啟發，謝謝！