Question

目标是定位一个元素，以便当用户悬停时，它会从中心向外增长（通过增加它的填充）。我试过这个但没有运气：

<div>
    <a href="javascript:void(0)">Go</a>
</div>

div {margin:100px; position:relative; background-color:#ddd;
     display:inline-block; padding:100px; }

a   {font-size:30px; height:50px; width:50px; border-radius:50%; 
     background:rgba(0,0,0,0.5); padding:20px;
    position:absolute; margin:-45px 0 0 -45px; text-align:center;}

a:hover {padding:30px;}

有什么想法吗？

JSFIDDLE

Answer 1

您可以使用transform: translate(-50%,-50%);代替margin

来实现

JSFiddle - DEMO

a {
    font-size:30px;
    border-radius:50%;
    background:rgba(0, 0, 0, 0.5);
    padding:20px;
    position:absolute;

    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);

    text-align:center;
    height:50px;
    width:50px;
}

更多信息：

CSS转换 - Mozilla MDN

[EDITED]

解决方案2 ：将margin:-55px 0 0 -55px;设置为a:hover

JSFiddle - DEMO

a {
    font-size:30px;
    border-radius:50%;
    background:rgba(0, 0, 0, 0.5);
    padding:20px;
    position:absolute;
    margin:-45px 0 0 -45px;
    text-align:center;
    height:50px;
    width:50px;
}
a:hover {
    padding:30px;
    margin:-55px 0 0 -55px;
}

如何定位元素以使其锚定在其中心

1 个答案:

[EDITED]