CSS中的多圖片環繞中心讓網頁設計變得更加生動。通過這種方式，可以讓多張圖片環繞在一個中心點周圍，形成一個更富有層次感的圖像。下面，我們來看一下如何使用CSS實現多圖片環繞中心的效果。

.wrapper {
position: relative;
width: 300px;
height: 300px;
}
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background-color: #f00;
border-radius: 50%;
}
.img-wrap {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.img-wrap img {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
animation: img-rotate 5s linear infinite;
}
@keyframes img-rotate {
0% {
transform: rotate(0deg) translateY(-100px) rotate(0deg);
}
100% {
transform: rotate(360deg) translateY(-100px) rotate(-360deg);
}
}

首先，我們需要一個包裹所有元素的容器。這里我們用一個名為“wrapper”的DIV元素作為容器，并設置其為相對定位（position: relative）。接著，在容器中創建一個小圓形元素，它將作為多個圖片的中心點。我們將它的class設置為“center”，并設置其為絕對定位（position: absolute），以便于將其居中。

接下來，我們需要一個圖片容器，它將包含所有需要環繞中心點的圖片。我們設置其class為“img-wrap”，將其寬高與容器相同，并使用flex布局，讓其中的圖片垂直水平居中。

最后，我們需要對圖片進行樣式設置，讓它們能夠圍繞中心點旋轉。我們對每張圖片設置絕對定位，并設置其寬高、圓角半徑等樣式。接著，我們使用CSS3的動畫功能，讓圖片圍繞中心點旋轉。使用@keyframes，我們設置圖片在5秒內從0度旋轉到360度，并在過程中向上移動100px，再反向旋轉360度，最后回到原點。