javascript - spin.js 顶部选项不起作用

Question

我尝试使用 spin.js

我希望它弹出在 div 元素的中间。所以我确实设置了:

位置:'相对'顶部:'50%'左:'50%'

但是顶部选项不起作用。分析完问题后，我可以将其分解为 html/css 问题:

<div style="background-color: red">
    <div style="position:relative; height:20px; width:20px; top:50%; left:50%; background-color:blue"></div>
    1st div line<br>br line<br>br line 2
    <div>div line 1</div>
    <div>div line 2</div>
</div>

在此示例中，蓝色元素应该位于红色元素的中间，但事实并非如此。这是它的填充:

http://jsfiddle.net/exu77/obcg3cxv/

这是原始版本的 spin.js 的 plunker

http://plnkr.co/edit/qwjArDtnqGZQgbkQiRYt?p=preview

Answer 1

position:relative 必须应用于父元素，即包含微调器的 div。微调器本身需要 position:absolute (这是默认值)。这是您的插件的更新版本，其中旋转器位于红色框内的中心:http://plnkr.co/edit/GstXJdzyDtBIyMLuzbcY?p=preview