CSS（Cascading Style Sheets）是前端開發中一種用于定義網頁樣式的語言，它可以幫助我們輕松地實現網頁的設計效果。其中，我們最常用的是居中效果。下面我們就來介紹如何用CSS定義一個DIV的居中效果。

/* 定義DIV居中的CSS樣式 */
div {
width: 500px; /* 定義DIV的寬度 */
height: 300px; /* 定義DIV的高度 */
border: 1px solid #333; /* 定義DIV的邊框樣式 */
position: absolute; /* 絕對定位 */
top: 50%; /* 相對于視口上邊緣的距離 */
left: 50%; /* 相對于視口左邊緣的距離 */
transform: translate(-50%, -50%); /* 頁面加載時居中 */
}

在上面的樣式中，我們定義了DIV元素的寬度、高度和邊框樣式，并使用了絕對定位的方式讓DIV元素距離視口的上邊緣和左邊緣各為50%的距離。然后，使用transform屬性中的translate函數將DIV元素水平和垂直方向上移動自身寬度和高度的一半。

這樣，無論DIV的高度和寬度如何變化，都可以實現居中效果，從而達到更加美觀的頁面視覺效果。