如何将绝对定位的div保存在可调整大小的可拖动容器div的中心？

Question

<!--container with jQuery UI draggable , resizable plugins applied--> 
<div class="container"> 
    <div class="stayInCenter" style="position:absolute;width:300px; height:400px"> 
     I will aways stay in center of the container no matter where you are 
     and how big or small you become 
    </div> 
</div> 

Answer 1

如果您不需要垂直居中：

.container .stayInCenter {  
    position:relative; /* Not absolute */ 
    margin:0 auto  /* Make the left/right be centered */ 
} 

如果您确实需要垂直居中也：

.container .stayInCenter {  
    position:absolute; 

    /* Move to the center of the positioned parent */ 
    left:50%; top:50%; 

    /* Give a fixed size */ 
    width: 300px; height: 400px; 

    /* Move backwards by half the size, so the center is at 50% */ 
    margin-left:-150px; margin-top:-200px; 
} 

此外，don't mix CSS with your HTML。

Answer 2

你把一个固定的宽度，让我们说的“width：500px的”
，你把“保证金：汽车”

如果你需要一个上边距，你写如。 'margin-top：100px''margin：auto'

应该完成这项工作