Javascript 定位我的&x27；翻转'；在页面中间循环

我已经创建了一个圆圈，里面的内容不仅可以翻转，还可以悬浮。。。我想确保这个圈子被放置在用户浏览器的中间，由于某种原因（我相信它是由于翻转）圆圈不居中。< /P>

HTML

---

将以下样式指定给容器div或圆：

position:absolute;
top:50%;
left:50%;
width:400px;
margin-left:-200px
height:400px;
margin-top:-200px

使用此css将其居中放置在页面中间。 工作原理：它将左上角精确定位在中间，然后负边距将向上向左“拉回”。（边距始终为宽度和高度的一半）

---

您错误地计算了

的宽度和高度。翻转容器

：

.flip-container, .front, .back {
    width: 370px; // .circle height + 2*padding = 300 + 2*35
    height: 385px; // .circle width + 2*padding + animation translate = 200 + 2*85 + 15
}

---

（另外，我删除了

.floating

）中的边距。

您的圆圈是否始终具有相同的大小？是的，它们应该具有相同的大小。好的，这看起来是可行的，但

.circle

中没有边距：/Hmm有一个问题，问题仍然存在于Safari中。有什么想法吗？为了更好地支持浏览器，请替换

transform:translateX（-50%）translateY（-50%）至
页边距顶部：-192.5px；左边距：-185px.flip container
（或与一起使用）中的code>完全忘记添加这些！
position:absolute;
top:50%;
left:50%;
width:400px;
margin-left:-200px
height:400px;
margin-top:-200px

<div id="container">

</div>

#container{
    position:absolute;
    left:0;right:0;top:0;bottom:0;
    width:400px;
    height:400px;
    background:rgba(255, 0, 73, 0.67);
    border-radius:50%;
    margin:auto auto;
    -webkit-animation: levite 2s ease-in-out 0s infinite normal;
}
@-webkit-keyframes levite{
    from {-webkit-transform:translate(0, 0);}
    65% {-webkit-transform:translate(0, 15px);}
    to {-webkit-transform: translate(0, 0);    }    
}

.flip-container, .front, .back {
    width: 370px; // .circle height + 2*padding = 300 + 2*35
    height: 385px; // .circle width + 2*padding + animation translate = 200 + 2*85 + 15
}