html - 如何将绝对元素居中在另一个绝对元素中,可用于旋转和动画目的
问题描述
为了清楚起见,我有两个正方形,它们都有position: absolute
,并且在另一个具有相对位置的 div 内。
这更多地与 UI 设计有关,而不是关于将两个 div 彼此居中并用于 web,它更多的是 UI 事物或弹出窗口或类似的动画事物。
这意味着我有一个比 box1 大的圆圈。然后我使用一个不可见的盒子,它的相对位置包含 box2 作为一个孩子
两个正方形的大小不同。
这里的新问题示例: https ://jsfiddle.net/mgznef98/2/
红框不允许改变位置边框必须以某种方式居中。我把它放在一个 box2 容器中来支持它,因为如果我要编辑它,box1 可能是另一个形状而不是一个简单的盒子
“一些容器”只是在网站上移动并携带所有“盒子”的“东西”,因此它不能与表格单元一起使用。
如果你想看看这个Rotate objects around circle using CSS? 在此页面上,它们围绕另一个元素的中心旋转元素,但它们不在中心内。我试图把一些东西放在一个中心。例如,一个带有可旋转边框的正方形。
不知何故,我设法使蓝色方块居中在红色方块内。我什至不确定它是否完全居中。https://jsfiddle.net/mgznef98之前在这个上,但是对于边框,我真的不知道。
我的问题是,我认为这背后有一些数学原理。我认为必须有一些公式来找出在“顶部”和“左侧”中放置的内容,这样当红色框改变宽度和高度时,我可以将蓝色“边框”框准确地居中在红色框内。
我所知道的是它会根据 box2 及其容器和 box1 的大小而变化。
例子:
再说一次,我有两个盒子,但其中一个是不可见的,在本例中是 box2 的容器。box2 不是一个盒子,而是一个旋转的“东西”。box1 不是一个盒子,而是一个元素,一个形状或有中心的东西。box2 有一个边框而不是背景色,并且该边框必须围绕元素的中心旋转。问题是box2比box1大。
.some-container {
top: 30px;
left: 30px;
position: relative;
}
.box1 {
width: 20px;
height: 20px;
background: red;
position: absolute;
}
.box2-container {
position: relative;
height: 20px;
width: 20px;
}
.box2 {
width: 40px;
height: 40px;
border: 2px solid blue;
position: absolute;
top: -50%; /* These values have to be changed when I want to recenter a new width and height from box1 */
left: -50%;
border-radius: 50%;
border-color: blue blue blue transparent;
border-width: 2px;
animation: box2-rotation 3s linear infinite;
}
@keyframes box2-rotation {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
<div class=some-container>
<div class=box1>
</div>
<div class=box2-container>
<div class=box2>
</div>
</div>
</div>
解决方案
我想这就是你想要的。
https://jsfiddle.net/5zun4tqr/
我已经使用了那里的示例:div 内的中心元素(圆形)
它将始终保持在中心,当与该 flexbox 方法一起使用时,大小不应该引起任何问题。
body {
background: #0a0a0a;
}
.some-container {
position: relative;
display: inline-block;
}
.some-container2 {
position: relative;
display: inline-block;
margin-left: 80px;
}
.some-container3 {
position: relative;
top: 30px;
left: 30px;
}
.box1 {
width: 50px;
height: 50px;
background: red;
position: absolute;
}
.box2-container {
display: flex;
position: relative;
height: 50px;
width: 50px;
justify-content: center;
align-items: center;
border: darkgreen solid 1px;
box-sizing: border-box; /* Because of the border */
}
@keyframes box2-rotation {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
.box2 {
width: 40px;
height: 40px;
border: 2px solid blue;
position: absolute;
border-radius: 50%;
border-color: blue blue blue transparent;
border-width: 2px;
animation: box2-rotation 3s linear infinite;
}
.replace1 {
width: 30px;
height: 30px;
}
.replace2 {
width: 30px;
height: 30px;
}
.replace3 {
width: 60px;
height: 60px;
}
.box3 {
width: 80px;
height: 80px;
border: 2px solid;
position: absolute;
border-radius: 50%;
border-color: green green green transparent;
border-width: 2px;
animation: box2-rotation 4s linear infinite;
}
.box4 {
width: 120px;
height: 120px;
position: absolute;
animation: box4-rotation 6s linear infinite;
}
@keyframes box4-rotation {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
.box4-circle {
stroke-dasharray: 52.275;
stroke-width: 2px;
animation: box4-rotateion 6s linear infinite;
animation-fill-mode: both;
transform-origin: center;
}
<div class=some-container3>
<div class=some-container>
<div class=box1>
</div>
<div class=box2-container>
<div class=box2>
</div>
</div>
</div>
<div class=some-container2>
<div class="box1 replace1">
</div>
<div class="box2-container replace2">
<div class="box2 replace3"></div>
<div class="box3"></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 107 107" class="box4">
<circle class="box4-circle" cy=50% cx=50% r=50 stroke=white fill=none></circle>
</svg>
</div>
</div>
</div>
</div>
推荐阅读
- laravel - 如何在 laravel 中过滤付费或未付费学生
- html - 是否可以在一个站点中显示 2 个不同的 CSS?
- asp.net - 无法将控制台应用程序连接到 SQLExpress
- api - 查看网页调用的 API
- git - git 成功推送到私有 github 存储库,即使令牌过期
- c# - 每次我在 WPF 中加载时如何使 Listbox 的 ScrollViewer 滚动到顶部
- python - 如何通过 Telethon 加入群组通话?
- python - OpenCV逆warpPolar输出帧外
- php - 在 Laravel 中仅允许带有验证的数字和浮点值
- python - 测试模型的程序没有显示没有错误