先看html代码
<!DOCTYPE html>
<html>
<head>
<style>
#div1
{
height: 500px;
width: 300px;
border: 1px solid black;
}
#div2
{
border: 1px solid black;
background-color: yellow;
opacity:0.5;
height:200px;
width:300px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">HELLO</div>
</div>
</body>
</html>
通常做法是使用绝对定位position: absolute,用top=50%、left=50%将div2移动到div1的中心点,再用transform: translate(-50%, -50%)后移自己的中心点就可以了,代码:
<style>
#div1
{
position: absolute;
height: 500px;
width: 300px;
border: 1px solid black;
}
#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%);
}
</style>
效果如下:
但是加入旋转就不行了
#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);
}
可以看出,并没有按照中心点旋转
为此,只能选择使用弹性盒子方案
<style>
#div1
{
display: flex;
align-items: center;
justify-content: center;
height: 500px;
width: 300px;
border: 1px solid black;
}
#div2
{
border: 1px solid black;
background-color: yellow;
opacity:0.5;
height:100px;
width:200px;
}
</style>
旋转前
旋转后
transform:rotateZ(90deg);
完整代码:
<!DOCTYPE html>
<html>
<head>
<style>
#div1
{
display: flex;
align-items: center;
justify-content: center;
height: 500px;
width: 300px;
border: 1px solid black;
}
#div2
{
border: 1px solid black;
background-color: yellow;
opacity:0.5;
height:100px;
width:200px;
transform:rotateZ(90deg);
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">HELLO</div>
</div>
</body>
</html>
使用弹性盒子对齐实现方便,旋转也以自己中心为轴,可以依旧保持中心对齐,这是优点。
此外注意:
1.如果div2的宽度超过div1的宽度,div2会自动缩小到div1宽度以内。
2.旋转后,虽然视觉上的长宽发生了变化,但对于对象旋转前后的长宽还是没变化的,对长宽进行调整,还要使用旋转之前的长与宽。
3.由于以上两点,导致如果旋转后设置新高度(旋转前宽度)如果超过div1的宽度,会导致看不到效果,这是因为被div1宽度弹性限制了。这是可以使用margin:属性,给其赋小于0的负数进行调整。计算方法如下:
margin = (新高度-原宽度)÷2×-1
以上是我反复调试的结果,虽然问题解决,但是总是觉得不理想。如果哪位朋友有更好的方案,请留言,感谢!