CSS 可以在網頁中輕松將元素居中顯示，其實現原理就是通過設置元素的margin屬性值，使其水平和垂直方向上產生相等的空白區域，從而使元素居中顯示。下面我們將學習使用 CSS 實現將元素在屏幕中間顯示。

/* 在屏幕中間顯示文本 */
.center-text {
display: flex;  /* 將容器設置為彈性布局 */
justify-content: center; /* 在主軸上居中對齊 */
align-items: center; /* 在交叉軸上居中對齊 */
height: 100vh; /* 設置容器高度為視口高度 */
}
/* 在屏幕中間顯示圖片 */
.center-img {
display: block; /* 將元素設置為塊級元素 */
margin: 0 auto; /* 在水平方向上居中對齊 */
}

上述示例代碼中，我們為文本和圖片分別設置了居中顯示的 CSS 樣式。對于文本內容，我們將其父級容器設置為彈性布局，并在主軸和交叉軸上均設置居中對齊。而對于圖片元素，我們直接設置它在水平方向上居中對齊。

通過上述示例代碼，我們可以輕松地將任何元素居中顯示在屏幕中，并在頁面布局設計中起到重要作用。