CSS中心擴(kuò)大（Center Expansion）是一種常見的樣式技巧，可以用來使元素在頁面中居中，并且逐漸擴(kuò)大或縮小。以下是一些簡單的示例，展示了如何使用CSS中心擴(kuò)大實(shí)現(xiàn)不同的效果。

/* 示例1 - 元素從中心逐漸放大 */
.box {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border: 50px solid transparent;
border-radius: 50%;
animation: expand 3s ease-in-out;
}
@keyframes expand {
0% {
transform: translate(-50%, -50%) scale(0);
}
100% {
transform: translate(-50%, -50%) scale(1);
}
}

這段代碼定義了一個類名為“box”的元素，它首先被定位到頁面的中心，然后通過設(shè)定邊框和邊框半徑，創(chuàng)建了一個圓形。接下來，在一個名為“expand”的動畫中，該元素在3秒內(nèi)逐漸從“不存在”的狀態(tài)擴(kuò)大到“原始大小”。

/* 示例2 - 元素從中心逐漸縮小 */
.box {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
background-color: #f00;
animation: shrink 3s ease-in-out;
}
@keyframes shrink {
0% {
transform: translate(-50%, -50%) scale(1);
}
100% {
transform: translate(-50%, -50%) scale(0);
}
}

這段代碼類似于示例1，但是它定義了一個紅色的正方形元素，并將其從“原始大小”逐漸縮小到“不存在”的狀態(tài)。

/* 示例3 - 元素從中心擴(kuò)展 */
.box {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background-color: #0f0;
animation: expand 3s ease-in-out;
}
@keyframes expand {
0% {
transform: translate(-50%, -50%) scale(0);
opacity: 0;
}
50% {
transform: translate(-50%, -50%) scale(1.2);
opacity: 0.5;
}
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
}

這段代碼定義了一個綠色元素，并通過動畫在頁面的中心擴(kuò)展。相比于示例1，此處的動畫融合了不透明度（opacity）的變化，使得元素在擴(kuò)展的過程中顯示得更為自然。

除了以上示例外，CSS中心擴(kuò)大還有許多其他的用法，可以用來實(shí)現(xiàn)各種各樣的效果。在實(shí)際使用時，需要根據(jù)具體的需求進(jìn)行調(diào)整和修改，以達(dá)到最佳的效果。