在網頁設計中，居中通常是必不可少的。而使用CSS可以輕松地定義和實現塊居中，無論是水平居中還是垂直居中。

/* 水平居中 */
.container {
width: 80%;
margin: 0 auto;
}

以上代碼可以將一個 .container 塊級元素水平居中。首先，為 .container 定義了一個固定的寬度。接下來，通過設置 margin 屬性，將左右邊距設為“auto”，就可以自動將其置于頁面中心。

/* 垂直居中 */
.container {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

以上代碼可以將 .child 元素在 .container 內垂直水平居中。首先，將 .container 的定位方式設置為相對定位。接下來，將 .child 元素的定位方式設置為絕對定位，并將頂部和左側的值都設為“50%”。最后，通過使用 transform 屬性的 translate() 函數，將 .child 元素沿其自身的中心線上下左右移動，從而實現在 .container 中垂直水平居中。