CSS 中的居中是一個經常需求的功能，其中圖片的居中也是一個很常見的需求。下面詳細介紹如何使用 CSS 使插入圖片居中。

img {
display: block;
margin: 0 auto;
}

以上是插入圖片居中的 CSS 代碼，下面對代碼進行詳細解釋：

• display: block;屬性是用來將圖片變為塊級元素，以便使用margin屬性來居中圖片。
• margin: 0 auto;屬性是用來設置圖片上下左右的邊距，其中auto屬性用來使左右邊距自動調整，從而實現圖片水平居中。

需要注意的是，以上的 CSS 代碼只適用于圖片的父元素為塊級元素的情況，如下面示例：

<div>
<img src="example.jpg" alt="Example">
</div>

以上的 HTML 代碼中，<div>元素是一個塊級元素，因此適用于以上的 CSS 代碼，使圖片居中。

如果圖片的父元素不是塊級元素，可以通過給父元素添加text-align: center;屬性來實現圖片水平居中，如下面示例：

<p style="text-align: center;">
<img src="example.jpg" alt="Example">
</p>

以上的 HTML 代碼中，<p>元素不是塊級元素，因此添加了text-align: center;屬性來使圖片水平居中。

總結：以上是使用 CSS 將插入的圖片居中的方法，通過將圖片變為塊級元素并設置邊距，或者將父元素的文本居中來實現。需要注意的是，父元素必須是塊級元素或者添加了居中樣式的行內元素。