在網(wǎng)頁開發(fā)中，我們經(jīng)常需要讓圖片在屏幕中間顯示。這不僅美觀，而且能夠讓用戶更快速的瀏覽頁面內(nèi)容。下面是一些可以實現(xiàn)這個效果的方法。

// 方法 1：使用 text-align 屬性
img {
display: block;
margin: 0 auto;
}
// 方法 2：使用 position 和 transform 屬性
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
// 方法 3：使用 flexbox 布局
.container {
display: flex;
justify-content: center;
align-items: center;
}
img {
max-width: 100%;
max-height: 100%;
}

使用 text-align 屬性是一種簡單的方法。我們讓圖片變成塊級元素，并將左右 margin 設(shè)為 auto。這樣就可以讓圖片在容器中水平居中。

使用 position 和 transform 屬性也是一種常用的方法。我們讓圖片絕對定位，然后用 translate 把它向左上方移動一半的距離。這樣就可以把圖片放在容器的中間位置。

使用 flexbox 布局可以非常方便的實現(xiàn)圖片水平和垂直居中。我們讓容器變成 flex 容器，并設(shè)定 justify-content 和 align-items 屬性為 center，這樣就可以讓圖片在容器中水平和垂直居中。