在前端開發(fā)中，圖片的水平垂直居中一直是一個常見的需求。CSS3提供了多種方式來實現(xiàn)這一效果。

一、使用Flex布局

.container {
display: flex;
justify-content: center;
align-items: center;
}
img {
/* 不需要特殊樣式 */
}

在包含圖片的父容器上設(shè)置Flex布局，并設(shè)置 justify-content 和 align-items 屬性為 center。

二、使用table元素

.container {
display: table;
width: 100%;
height: 100%;
}
img {
display: table-cell;
text-align: center;
vertical-align: middle;
}

將圖片的父容器設(shè)置為 display: table，并設(shè)置寬度和高度為100%，然后將圖片設(shè)置為表格單元格，設(shè)置文本對齊方式為居中，垂直對齊方式為中間對齊。

三、使用position屬性

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

將父容器設(shè)置為相對定位，將圖片設(shè)置為絕對定位，并使用 top：50%，left：50% 將圖片移動到父容器的中心，然后使用 transform 屬性將圖片向上和向左移動自身寬度和高度的一半實現(xiàn)居中對齊。

以上是三種常用的方式來實現(xiàn)圖片的水平垂直居中。實際應(yīng)用中，可以根據(jù)不同的需求來靈活運用。