Javascript 使旋转的Div居中

我正在做一个孩子在父母中的轮换。父对象的宽度和高度是固定的，而子对象的宽度和高度是动态的

比方说

Child width - Cw
Child height - Ch
Parent width - Pw
Parent height - Ph


When `Cw > Pw && Ch < Ph` then expected: `left=0 and vertically centered`
When `Cw < Pw && Ch > Ph` then expected: `top=0 and horizontally centered`
When `Cw > Pw && Ch > Ph` then expected: `left=0 and top=0`
When `Cw < Pw && Ch < Ph` then expected: `vertically and horizontally centered`

子宽度-Cw
儿童身高-Ch
父宽度-Pw
亲本高度-Ph
当'Cw>Pw&&ChPh'时，则应为：'top=0且水平居中`
当'Cw>Pw&&Ch>Ph'时，则应为：`left=0，top=0`
当'Cw

小提琴-

---

这几天我做了很多尝试。我在做的一把小提琴在这里。以防万一你不相信-

你有没有想过用稍微不同的方式来处理这个问题，使用CSS进行旋转，使用jQuery进行启动/停止操作？下面只是一个shell示例，让您了解如何将其应用于您的目的

像

CSS

HTML

看看这个#e：啊，高度搞砸了

div{
    display:inline-block;
}
.parent{
    border:1px solid grey;
}
.child{
    height:100px;
    width:100px;
    border-radius:9px;
    background:blue;
    margin:10px;
}

.rotate {
    -webkit-animation:rotate 4s linear infinite;
    -moz-animation:rotate 4s linear infinite;
    animation:rotate 4s linear infinite;
}
@-moz-keyframes rotate { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg); } }
@keyframes rotate { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

<div class='parent'>
    <div class='child'>
    </div>    
</div>
<a id='rotate' href='#'>Rotate</a>

$('#rotate').click(function(){
   $('.child').addClass('rotate');
});