在CSS中，設計圖片居中可以通過使用flexbox布局來實現，我們需要將圖片所在的容器設置為一個flexbox，然后利用justify-content和align-items屬性來實現圖片在水平和垂直方向上的居中。

下面是一個簡單的示例代碼：

<div class="image-container">
  <img src="image.jpg" alt="示例圖片">
</div>

.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 這里的height可以根據實際需要調整 */
}

在上面的代碼中，我們首先將圖片所在的容器image-container設置為一個flexbox，通過justify-content: center;實現了圖片在水平方向上的居中，align-items: center;則實現了圖片在垂直方向上的居中，我們設置容器的高度為100vh，這樣圖片就可以在整個頁面中居中了。

這只是一個簡單的示例，實際的應用中可能還需要根據具體的需求進行調整，基本的思路是相通的：通過flexbox布局來實現圖片的居中顯示。