CSS对象中心点对齐与旋转

先看html代码

    

      
HELLO
    

通常做法是使用绝对定位position: absolute，用top=50%、left=50%将div2移动到div1的中心点，再用transform: translate(-50%, -50%)后移自己的中心点就可以了，代码：

效果如下：

但是加入旋转就不行了

#div2
{
    border: 1px solid black;
    background-color: yellow;
    opacity:0.5;
    height:100px;
    width:200px;
    
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    transform:rotateZ(90deg);  
}

 可以看出，并没有按照中心点旋转

 为此，只能选择使用弹性盒子方案

旋转前

旋转后

transform:rotateZ(90deg);

 

完整代码：

    

      
HELLO
    

 使用弹性盒子对齐实现方便，旋转也以自己中心为轴，可以依旧保持中心对齐，这是优点。

此外注意：

1.如果div2的宽度超过div1的宽度，div2会自动缩小到div1宽度以内。

2.旋转后，虽然视觉上的长宽发生了变化，但对于对象旋转前后的长宽还是没变化的，对长宽进行调整，还要使用旋转之前的长与宽。

3.由于以上两点，导致如果旋转后设置新高度（旋转前宽度）如果超过div1的宽度，会导致看不到效果，这是因为被div1宽度弹性限制了。这是可以使用margin:属性，给其赋小于0的负数进行调整。计算方法如下：

margin = （新高度-原宽度）÷2×-1

以上是我反复调试的结果，虽然问题解决，但是总是觉得不理想。如果哪位朋友有更好的方案，请留言，感谢！