CSS 中的垂直和水平居中是網頁設計中常見的需求。尤其是在布局中，我們經常需要讓元素在頁面中居中顯示。而使用 grid 布局可以相對輕松地實現這個目標。 Grid 是 CSS3 新增的一種布局方式，相比傳統的 float 和 position 布局更加靈活和易用。在使用 grid 布局時，可以將頁面劃分為一個個網格，然后通過調整網格的位置和大小來實現元素的布局。 下面是一個簡單的 CSS grid 示例，實現了一個紅色正方形在頁面中居中顯示的效果，其代碼如下：

.container {
display: grid;
justify-content: center;
align-items: center;
height: 100vh;
}
.item {
width: 100px;
height: 100px;
background-color: red;
}

在上面的代碼中，我們首先定義了一個 .container 的容器元素，通過設置 display: grid 將其轉換為 grid 布局。然后使用 justify-content 和 align-items 屬性將其內部的 .item 元素水平垂直居中，并且使用 height 屬性設置容器的高度為整個視口的高度。 接著定義了一個 .item 元素，設置其寬度和高度為 100px，并且設置其背景顏色為紅色。這個元素會被放置在 .container 的中心位置，并且通過 grid 布局自動調整大小和位置。 使用 grid 布局可以輕松實現元素的垂直和水平居中，而且其代碼相對簡單易懂。在進行網頁設計時，我們可以使用 grid 布局來實現各種不同的布局效果，提高網站的可讀性和美觀性。