Html 设置动画时使DIV居中

我用

id=“wrapper”

使用CSS3。 但是，如果将鼠标悬停在圆形框上，动画将左对齐，但不居中对齐。 代码的URL是@

谢谢和问候

Alex

请尝试以下内容：

div.roundedbox:hover{
    width:100px;
    left: 137.5px; //Add this line
}

---

您可以向这两个应用到原始大小一半的区域添加边距应用效果，如

顶部

和

底部

以及

右侧

和

左侧

看看这个例子：

---

将块从内联块更改为显示：块 自动添加边距0 移除绝对位置

快拉小提琴

---

}

如果你像你说的那样使用现代CSS，那么你可以指定：

left: 50%; /* or figure out where the center is */

然后只需将元素向左移动一半大小，您可以使用

变换
：

transform: translateX(-50%);

所以现在，即使您的元素正在更改其大小，其位置（平移）也将根据其大小而更改。无论元素的位置或显示方式如何，此（转换）始终有效

您肯定需要使用一些供应商前缀。
您可以在动画期间减小“left”属性的值。因此，在动画制作过程中，您几乎需要添加新的位置。同意。问题是没有其他地方可以让圆形盒子生长。通过定义一个绝对左侧位置，您可以说这个框的左侧应该始终位于这个像素处。因此，它会向右生长。
#wrapper{
position:relative;
width: 400px
}

.roundedbox{
position:relative;
width:75px;
height: 75px;
background-color: pink;
display: block;
text-align: center;
margin: 10px auto;
border-radius:10px;
transition-property:border-radius width;
transition-duration:2s;
transition-timing-function:linear;

left: 50%; /* or figure out where the center is */

transform: translateX(-50%);