如何使我的绝对定位元素具有响应性？

Question

我试图在容器中间（水平和垂直）居中（水平和垂直）这个圆形形状并使其响应。 我不知道如何在没有绝对定位的情况下保持圆形。 任何帮助表示赞赏！

 var n = 20; for (var i = 0; i < n; ++i) { var d = document.createElement('div'); var r = 360 * i / n; var s = 'translate(200px,200px) rotate(' + r + 'deg) translate(0px, -80px)'; d.setAttribute('class', 'box'); d.setAttribute('style', '-webkit-transform:' + s); document.getElementById("container").appendChild(d); }

 .box { background: #d0d0d0; width: 20px; height: 30px; border-radius: 7px; position: absolute; border: 1px solid black; } .box:hover { background: red; }

 <div id='container'></div>

http://jsfiddle.net/ths432/6qtm28f5/52/

Answer 1

将它们相对于容器定位，然后将容器居中：

 var n = 20; for (var i = 0; i < n; ++i) { var d = document.createElement('div'); var r = 360 * i / n; var s = 'translate(-50%,-50%) rotate(' + r + 'deg) translate(0px, -80px)'; d.setAttribute('class', 'box'); d.setAttribute('style', '-webkit-transform:' + s); document.getElementById("container").appendChild(d); }

 #container { position: relative; margin:100px auto; /* 80x + 20px */ width:200px; /* 2*80px + 2*20px */ } .box { background: #d0d0d0; width: 20px; height: 30px; border-radius: 7px; position: absolute; border: 1px solid black; /* the below conmbined with the translate(-50%,-50%) in the JS will center */ top:50%; left:50%; } .box:hover { background: red; }

 <div id='container'></div>

Answer 2

尝试使用 50% 的边界半径、相对定位而不是绝对定位和边距：自动。 这将迫使盒子到达其容器的中心。

.box {
    background: #d0d0d0;
    width: 20px;
    height: 30px;
    border-radius: 7px;
    position: relative;
    border: 1px solid black;
    margin: auto;
}

由于高度和宽度属性不同，此 css 将创建椭圆而不是圆形。 如果圆形是您正在寻找的行为，请将高度和宽度更改为具有相同的值。