CSS是網頁設計中不可缺少的樣式表語言，居中一張照片也可以用CSS實現。以下是一種基于CSS的居中照片的代碼示例。

.center-img {
display: flex;
justify-content: center;
align-items: center;
}
.center-img img {
width: 50%;
height: auto;
}

首先，我們需要創建一個包含照片的容器。在本例中，我使用了一個類名為"center-img"的div來作為容器。
接著，我們使用了flexbox布局來將照片在容器中居中。通過設置display屬性為flex，我們可以將元素變成flex容器。
使用justify-content和align-items屬性，我們可以分別控制容器內元素在水平和垂直方向上的對齊方式。在這里，我們設置了justify-content和align-items屬性值都為center，這將使照片在容器中垂直和水平居中。
最后，我們設置了照片的寬度為50%，這是為了確保照片大小適合其容器并保持其比例。我們還將高度設置為auto，這將使照片按照其原始寬高比例進行縮放。

通過上述代碼，我們可以輕松地將圖片居中，不管圖片大小和容器大小如何，都能夠實現完美的居中效果。