CSS3為網頁設計中的圖片居中提供了更多的方式。

下面列舉幾種常用的圖片居中方法：

/* 水平垂直居中方法1 */
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
/* 水平垂直居中方法2 */
.container {
display: flex;
justify-content: center;
align-items: center;
}
/* 水平居中方法1 */
.img {
display: block;
margin: 0 auto;
}
/* 水平居中方法2 */
.img {
position: absolute;
left: 50%;
transform: translateX(-50%);
}

以上代碼中，方法1是使用了絕對定位，top和left屬性將圖片的左上角移動到了頁面中心點，transform屬性則通過translate函數平移了圖片本身的一半寬度和高度，達到水平垂直居中的效果。

方法2是利用了flex布局，將容器內的內容水平和垂直居中。

方法3和方法4是僅僅水平居中的方法。方法3將圖片設置為塊級元素，使用margin屬性實現水平居中，方法4則是使用絕對定位，將圖片的左邊框線與容器的中心點重合，再利用transform函數將圖片本身的一半寬度平移回左側，實現水平居中的效果。