在網頁設計中，字體和圖片的排版是非常重要的。而居中是其中最基本的處理之一。本文將介紹如何使用CSS來實現字體和圖片的居中，并給出示例代碼。 一、字體居中 1. 水平居中 要讓文字水平居中，可以在CSS中給相應元素設置如下屬性： text-align: center; 例如：

這是一段文字

2. 垂直居中 要讓文字垂直居中，可以在CSS中先把相應元素的高度設置成與父元素相同，然后再在其中使用“line-height”屬性來使文字垂直居中。 例如：

這是一段文字

二、圖片居中 1. 水平居中 要讓圖片水平居中，可以給其父元素設置“text-align: center”屬性。 例如：

<div style="text-align:center;">
<img src="圖片地址" alt="" />
</div>

2. 水平垂直居中 要讓圖片水平垂直居中，可以使用CSS中的定位屬性position:absolute和left、top屬性來實現。 例如：

<div style="position: relative; width: 300px; height: 300px;">
<img src="圖片地址" alt="" style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);" />
</div>

在上述代碼中，需要注意的是： - 父元素需要設置相應的寬高，此處為300px； - 子元素（即圖片）需要使用相對定位（relative），并用絕對定位（absolute）來設置居中； - left和top的值為50%，表示在父元素中水平垂直居中； - 最后使用transform將圖片向左和向上移動50%即可。 細節提示： 1. 一定要將圖片轉為塊級元素，才能實現圖片水平居中。 2. 如果想要實現多張圖片在同一行中水平居中，可以給圖片的父級元素添加“text-align： center”屬性。 3. 在使用絕對定位實現圖片水平垂直居中時，記得一定要給父元素設置相應的寬高，否則無法實現居中。 以上就是關于字體和圖片居中的實現方法，希望能夠對你有所幫助。