CSS轮播图旋转问题：如何让轮播图绕自身中心在Div容器内旋转？

要解决轮播图在容器左侧旋转、无法绕自身中心在容器内转动的问题，核心要搞定两个关键点：让轮播图在容器里居中，以及设置正确的旋转原点，具体操作如下：

1. 先让轮播图在父容器中居中 #

给承载轮播图的父容器添加布局样式，让轮播图定位到容器正中心：

.carousel-wrapper {
  /* 父容器的宽高根据你的需求设置 */
  width: 100%;
  height: 400px;
  /* 用flex布局快速实现水平+垂直居中 */
  display: flex;
  justify-content: center;
  align-items: center;
}

如果不想用flex，也可以用定位方式实现：

.carousel-wrapper {
  position: relative;
  width: 100%;
  height: 400px;
}

.carousel {
  position: absolute;
  left: 50%;
  top: 50%;
  /* 通过translate把元素拉回自身一半宽高，实现精准居中 */
  transform: translate(-50%, -50%);
}

2. 设置轮播图的旋转原点为自身中心 #

默认情况下，CSS的transform-origin属性值是元素的左上角（0% 0%），所以旋转时会绕着左上角转动。给轮播图加上这个属性，让它绕自身中心旋转：

.carousel {
  /* 轮播图自身的宽高 */
  width: 300px;
  height: 200px;
  /* 关键：设置旋转原点为自身中心 */
  transform-origin: center center;
  /* 示例旋转动画，可替换成你自己的轮播动画逻辑 */
  animation: rotate 5s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

为什么之前调width、margin没用？ #

你之前调整width、margin可能只解决了部分水平位置问题，但没同时搞定垂直居中，也没设置transform-origin。只有让元素在容器里完全居中，再把旋转原点设为自身中心，才能实现“围绕自身轴线在容器中心旋转”的效果。

内容的提问来源于stack exchange，提问作者Whiskaso