CSS 是一種用于網頁設計布局的語言，它可以輕松地將圖片和文字居中展示。在編寫 CSS 樣式表時，我們經常會使用以下兩種技術來實現這個目標：

.img-container {
display: flex;
justify-content: center;
align-items: center;
}
.text-container {
text-align: center;
}

首先來看圖片居中的情況。我們可以使用 Flexbox 布局來實現。我們給圖片和它的容器添加一個 CSS 類，比如.img-container， 然后給這個類設置以下樣式：

.img-container {
display: flex;        /* 將容器設置為 Flexbox 布局 */
justify-content: center; /* 將內容居中對齊 */
align-items: center;     /* 垂直方向也居中對齊 */
}

通過這些 CSS 樣式，圖片和它的容器都將在水平和垂直方向上居中對齊顯示。

接下來是文字居中的情況。我們可以使用text-align: center;樣式來讓文本水平居中對齊。比如，我們可以給文本所在的容器添加一個 CSS 類似如下：

.text-container {
text-align: center;
}

這樣，文本將在容器內水平居中對齊。

總之，通過使用 Flexbox 布局和 text-align 樣式，我們可以輕松地將圖片和文本居中對齊，讓網頁設計更加美觀。