使用css时，旋转html插入符号不会从中心旋转

使用CSS时，旋转HTML插入符号不会从中心旋转的原因是，CSS中的旋转变换默认是以元素的左上角作为旋转中心点。如果想要实现从中心旋转，可以通过以下步骤来实现：

1. 首先，将HTML插入符号包裹在一个父元素中，例如一个<div>元素。
2. 使用CSS的transform属性来对父元素进行旋转变换。可以使用rotate函数来指定旋转角度，例如transform: rotate(45deg)表示顺时针旋转45度。
3. 为了使旋转的中心点位于父元素的中心，可以使用CSS的transform-origin属性来指定旋转中心点的位置。可以使用关键字center来表示中心点，例如transform-origin: center。
4. 最后，为了保证旋转后的元素不超出父元素的范围，可能需要对父元素进行适当的调整，例如设置合适的宽度和高度，以及使用CSS的overflow属性来控制溢出内容的显示方式。

以下是一个示例代码：

<div class="rotate-container">
  <span class="rotate-symbol">+</span>
</div>

.rotate-container {
  width: 100px;
  height: 100px;
  position: relative;
  transform: rotate(45deg);
  transform-origin: center;
}

.rotate-symbol {
  display: block;
  font-size: 24px;
  text-align: center;
  line-height: 100px;
}

在上述示例中，.rotate-container是包裹HTML插入符号的父元素，通过设置宽度和高度为100px，以及使用position: relative来创建一个相对定位的容器。然后，通过transform: rotate(45deg)将父元素旋转45度，并使用transform-origin: center将旋转中心点设置为父元素的中心。.rotate-symbol是HTML插入符号的样式，通过设置display: block使其成为块级元素，以及设置合适的字体大小、文本对齐方式和行高来使其居中显示。

这样，HTML插入符号就会从中心旋转了。如果需要更复杂的旋转效果，可以根据具体需求进行调整。