CSS是網頁中控制樣式和布局的一項技術，有時候我們需要將圖片放在頁面中央，下面就是一些實現居中的方法。

/* 方法一：使用text-align center */
.container {
text-align: center;
}
img {
display: inline-block;
}

將圖片包裹在一個容器中，給容器設置text-align的屬性值為center，將圖片的display屬性設置為inline-block，就可以實現圖片居中。

/* 方法二：使用margin */
.container {
position: relative;
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

給容器設置position:relative；將圖片的position設為absolute，然后將top和left的屬性值都設置為50%，使用CSS3中的transform函數，將圖片向左上方偏移它自身寬度和高度的一半，也就是translate(-50%, -50%)，就可以實現圖片居中。

/* 方法三：使用flexbox */
.container {
display: flex;
justify-content: center;
align-items: center;
}

使用display屬性設置容器為flexbox布局，然后使用justify-content居中主軸上的元素，align-items居中交叉軸上的元素，就可以實現圖片居中。