css中如何让时针在表盘的中心

CSS中如何让时针在表盘的中心？

.needle{
	position: absolute;
	top: 50%;
	left: 50%;
	transform-origin: 0 50%;
	transform: translateX(-50%) translateY(-50%) rotate(90deg);
}

.hour {
  height: 40px;
  width: 8px;
  background-color: red;
}

.minute {
  height: 70px;
  width: 6px;
  background-color: black;
} 

想要让时针在表盘的中心，需要使用CSS中的绝对定位（position:absolute）以及transform变换。

首先，需要给时针的外层容器添加position:relative属性，使内部的时针容器可以使用绝对定位相对于外层容器来定位。

其次，给时针容器添加position:absolute属性，并设置top和left属性为50%，使其水平垂直居中于外层容器。

然后，设置时针容器的transform-origin属性为“0 50%”，使其以左边为旋转点，旋转时钟方向。

最后，设置时针容器的transform属性来旋转时针，可以通过rotate(degrees)来设置旋转角度，将时针旋转到所需的位置。

需要注意的是，时针容器的旋转角度需要根据当前的时间实时更新。

// 获取当前时间的小时数和分钟数
var hour = new Date().getHours();
var minute = new Date().getMinutes();

// 计算小时针和分钟针的旋转角度
var hourDeg = hour * 30 + minute / 2; // 每小时旋转30度，每分钟旋转0.5度
var minuteDeg = minute * 6; // 每分钟旋转6度

// 修改针的transform属性
document.querySelector('.hour').style.transform = 'rotate(' + hourDeg + 'deg)';
document.querySelector('.minute').style.transform = 'rotate(' + minuteDeg + 'deg)'; 

通过以上代码，即可实现时针在表盘的中心。该方法适用于所有类型的时钟，包括模拟时钟和数字时钟。