CSS是前端開發中不可或缺的一環，它可以用來處理網頁的樣式、排版等方方面面的問題。其中，圖片和文字的居中對齊是我們在頁面設計中常用的技巧，讓我們來看看如何實現。 首先，我們需要在HTML中插入一張圖片和一段文字：

<div class="container"><img src="example.jpg" alt="example image"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div>

接下來，我們可以在CSS中通過設置容器的寬度和text-align屬性來水平居中容器中的內容：

.container {
width: 300px; /* 容器寬度 */
margin: 0 auto; /* 自動居中 */
text-align: center; /* 水平居中 */
}

現在，容器中的圖片和文字已經水平居中了，但是它們還沒有豎直居中。我們可以通過設置圖片和文字的display屬性為inline-block并設置它們的vertical-align屬性來實現豎直居中對齊：

.container img,
.container p {
display: inline-block; /* 設為行內塊 */
vertical-align: middle; /* 豎直居中對齊 */
}

現在我們已經實現了圖片和文字的水平和豎直居中對齊，整個頁面看起來更加美觀。 通過CSS的樣式屬性，我們可以輕松地實現頁面中的多種變化，其中圖片和文字的居中對齊是頁面設計中常用的一個技巧。希望這篇文章對你有所幫助！