Positioning DIVs after resizable()

Question

I'm using jQuery's resizable(). I want to center an image to the resized div after it's resized. I'm using the stop: function() but no success.

This what I've tried. But it does not center the div to the resized div. How do I center #smlD to #mainD when resized?

$('#mainD').resizable({
              stop: function (){
                var gpa = ($('#mainD').width() - $('#smlD').width()) / 2;
                    $('#smlD').css({ left: gpa });
              }
        });

EDIT

css:

.inW3{
    position:relative;
    background-color: #000;
    width: 100px;
    height: 100px;      
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
}

.innerWrp .inW1 .inW2{
    position: relative;
}

.outerWrp{
    position: absolute;
}

html:

<div class ="outerWrp">
   <div class ="innerWrp">
      <div class ="inW1">
         <div class ="inW2" id="mainD">
            <div class ="inW3" id ="smlD">
            </div>
         </div>
      </div>
   </div>
</div>

Answer 1

Let the css do the work for you. With margin-left: auto and margin-right: auto you shouldn't be worried about centering on stop resizable().

Check out your code here CodePen working with centering on resize:

$('#mainD').resizable();