CSS 層居中顯示圖片是網頁設計中經常用到的技巧，它可以讓圖片在瀏覽器中垂直和水平方向上居中顯示。

實現圖片居中顯示的方法有很多，這里我們介紹兩種常用方法。

第一種方法，使用CSS的flex布局。代碼如下：

<div class="container">
<img src="image.jpg" alt="圖片">
</div>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container img {
max-width: 100%;
max-height: 100%;
}

在上面的代碼中，我們使用了一個包含圖片的容器 div，并且使用了 display: flex; 讓容器變成 flex 容器，然后使用了 justify-content: center; 和 align-items: center; 讓圖片在水平和垂直方向上都居中顯示。

另一種方法，使用絕對定位和負邊距。代碼如下：

<div class="container">
<img src="image.jpg" alt="圖片">
</div>
.container {
position: relative;
width: 100%;
height: 100vh;
}
.container img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
max-height: 100%;
}

在上面的代碼中，我們使用了一個包含圖片的容器 div，并且使用了 position: relative; 讓容器變成相對定位，同時設置了寬度 100% 和高度 100vh。然后使用了 position: absolute;、top: 50%; 和 left: 50%; 讓圖片相對于容器垂直和水平方向上都居中，最后使用了 transform: translate(-50%, -50%); 讓圖片繼續向左和向上移動自身寬度和高度的一半，以保持居中狀態。

以上就是兩種常見的 CSS 層居中顯示圖片的方法，根據具體的情況選擇適合的方式即可。