在網站設計中，為圖片設置正確的位置非常重要，特別是在圖片位于網頁的重要位置時。為確保頁面呈現出平衡美觀的效果，我們需要使用CSS來能夠將圖片和其他元素進行良好的排列。在下面的代碼塊中，我們會學習如何使用CSS代碼來讓圖片居于正中間。

.img-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.img-container img {
max-width: 100%;
max-height: 100%;
}

我們創建一個包裹圖片的div元素，并將其命名為.img-container，在css中定義它的 display 為 flex，讓元素沿著主軸居中對齊。接著將align-items設置為 center，此操作將元素在交叉軸上居中對齊。接下來將此元素的高度設置為100vh，這代表元素將占滿整個視口高度。

最后，我們需要為圖片設置最大的寬度和高度，以保證圖片長寬比例不失衡，同時還能保證圖片自適應屏幕大小調整。