在網頁設計中，經常需要使用 CSS 來設置頁面樣式。其中，居中元素和插入圖片是常見需求。本文將介紹如何使用 CSS 來實現這兩個功能。

首先，我們來看如何居中元素。一般情況下，可以使用 margin 屬性來控制元素的位置，例如：

.center {
margin: 0 auto;
}

上面的代碼將會使一個塊級元素水平居中。其中，margin 第一個參數表示上下間距，第二個參數表示左右間距。這里將左右間距設為 auto，表示由瀏覽器自動計算實際距離，從而實現水平居中。

接下來，我們來看如何插入圖片。插入圖片需要用到 HTML 中的 img 標簽，例如：

<img src="example.jpg" alt="example image">

上面的代碼將會插入一張名為 example.jpg 的圖片。其中，src 屬性表示圖片的 URL，alt 屬性表示當圖片無法加載時的替代文本。

最后，我們將結合上面兩個功能，實現一個居中顯示圖片的例子：

.center {
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}

上面的代碼將會居中一張圖片。其中，display: flex 表示將元素轉換成彈性盒子，justify-content 和 align-items 屬性用來設置水平和垂直方向上的對齊方式。

總之，在網頁設計中，CSS 可以讓我們輕松實現各種效果，包括居中元素和插入圖片等功能。希望本文能對大家有所幫助。