文本與圖片是網(wǎng)頁設(shè)計中經(jīng)常出現(xiàn)的元素，而如何將它們垂直居中是個很重要的問題。本文將介紹如何使用CSS實現(xiàn)文字和圖片的垂直居中。 想要垂直居中一個文本框，可以使用下面的CSS代碼： ``` .container { display: flex; justify-content: center; align-items: center; height: 100vh; } .text-box { width: 50%; height: 50%; text-align: center; } ``` 這里我們使用了flexbox的特性，將父容器設(shè)置為彈性容器，并使用justify-content和align-items屬性進行水平和垂直的居中。然后在文本框的樣式中設(shè)置了寬度和高度，并將text-align屬性設(shè)置為center，以使文本水平居中。 而要垂直居中一個圖片，可以使用以下代碼： ``` .container { display: flex; justify-content: center; align-items: center; height: 100vh; } .image { max-width: 100%; max-height: 100%; } ``` 同樣地，我們將父容器設(shè)置為彈性容器，使用justify-content和align-items屬性進行居中，然后設(shè)置圖片的樣式為最大寬度和最大高度為100%，從而使其保持比例，不會變形。 如果要同時垂直居中文字和圖片，可以將它們放在同一個容器中，并使用類似的代碼進行設(shè)置。例如： ``` .container { display: flex; justify-content: center; align-items: center; height: 100vh; } .text-box { width: 50%; height: 50%; text-align: center; } .image { max-width: 100%; max-height: 50%; margin-left: 20px; } ``` 這里我們將文本框和圖片都放在.container容器中，并將其高度設(shè)為100vh。然后我們將文本框的高度設(shè)為50%，圖片的高度設(shè)為50%，并設(shè)置圖片的左側(cè)margin為20像素，從而在視覺上增加了一些空間。 綜上所述，使用CSS進行文字和圖片的垂直居中非常容易。只需將它們放在一個彈性容器中，然后使用適當(dāng)?shù)臉邮綄⑺鼈冊O(shè)置為居中即可。