CSS对象中心点对齐与旋转

最新推荐文章于 2024-07-11 10:41:40 发布

beiger

最新推荐文章于 2024-07-11 10:41:40 发布

阅读量3.6k

点赞数 1

分类专栏：笔记程序开发文章标签： css html 前端弹性盒子旋转对中

本文链接：https://blog.csdn.net/dgnankai/article/details/122697781

版权

笔记同时被 2 个专栏收录

41 篇文章 4 订阅

订阅专栏

程序开发

38 篇文章 0 订阅

订阅专栏

先看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

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

beiger

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
CSS对象中心点对齐与旋转

先看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;
复制链接

扫一扫