jquery - 如何将绝对定位的 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 .