How to keep absolutely-positioned div in the center of a resizable draggable container 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

If you don't need vertical centering:

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

If you do need vertical centering also:

.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;
}

Also, don't mix CSS with your HTML.

Answer 2

you put a fixed width, let's say 'width:500px'
and you put 'margin:auto'

if you need a top margin, you write eg. 'margin-top:100px' after the 'margin:auto'

should do the job