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

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

上述代碼中，我們使用了相對(duì)定位和絕對(duì)定位相結(jié)合的方式，先給外層容器設(shè)置相對(duì)定位，再使用絕對(duì)定位將圖片偏移至父元素的中心位置，細(xì)心的讀者會(huì)發(fā)現(xiàn)代碼中使用了transform屬性來(lái)實(shí)現(xiàn)偏移功能，這是因?yàn)槭褂胢argin負(fù)值會(huì)使原有內(nèi)容被遮擋，而使用transform則不會(huì)。 當(dāng)然，有時(shí)候我們還需要給圖片設(shè)置最大寬度或最大高度，并保持圖片寬高比例不變。此時(shí)可以使用如下代碼：

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

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