<div> 是 HTML 中常用的標簽之一，用于創建一個容器，可以用來包裹其他 HTML 元素。在 CSS 中，我們可以通過旋轉（rotate）來改變 <div> 的位置和方向。通過設置旋轉中心，我們可以使 <div> 在頁面中居中旋轉，從而實現一些獨特的效果和動畫。
下面我將通過幾個代碼案例來詳細解釋如何在 <div> 中心旋轉。
案例一：基本旋轉效果 在 CSS 中，我們可以使用 transform 屬性來實現旋轉效果。通過設置transform: rotate(angle)，可以使一個元素以指定角度進行旋轉。，我們來看一個基本的例子：

<p>\<style>
.rotate {
width: 200px;
height: 200px;
background-color: red;
transform: rotate(45deg);
}
\</style>
<br>
\<div class="rotate"></div>

在這個例子中，我們創建了一個寬高為 200px 的紅色 <div>，并通過transform: rotate(45deg)來使其以 45 度的角度進行旋轉。你可以嘗試修改rotate的數值來改變旋轉角度。
案例二：居中旋轉 接下來，我們將介紹如何讓 <div> 居中旋轉。我們可以使用position: absolute和left: 50%的方式將 <div> 水平居中，然后再利用top: 50%和transform: translate(-50%, -50%)將其垂直居中。代碼如下：

\<style>
.center-rotate {
width: 200px;
height: 200px;
background-color: blue;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(90deg);
}
\</style>
<br>
\<div class="center-rotate"></div>

在這個例子中，我們創建了一個寬高為 200px 的藍色 <div>。通過position: absolute和left: 50%; top: 50%的設置，我們將 <div> 水平垂直居中，然后再通過transform: translate(-50%, -50%)將其向左上方偏移自身寬高的一半，從而使其垂直水平居中。最后，我們通過transform: rotate(90deg)將其旋轉 90 度。
案例三：無限旋轉動畫 我們還可以利用 CSS 中的動畫效果來實現一個無限旋轉的動畫。下面是一個簡單的例子：

\<style>
.infinite-rotate {
width: 200px;
height: 200px;
background-color: green;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(0deg);
animation: rotate 5s infinite linear;
}
<br>
  @keyframes rotate {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
\</style>
<br>
\<div class="infinite-rotate"></div>

在這個例子中，我們創建了一個寬高為 200px 的綠色 <div>，通過設置animation: rotate 5s infinite linear實現了一個持續 5 秒的無限旋轉動畫。通過@keyframes我們定義了動畫的關鍵幀，從 0% 的狀態（初始狀態）到 100% 的狀態（旋轉 360 度）。通過transform: translate(-50%, -50%)實現居中效果。
通過以上三個案例，我們可以清楚地看出如何在 <div> 中心旋轉。通過設置合適的 CSS 屬性和值，我們可以實現各種各樣的效果和動畫。希望這篇文章對你有所幫助！