Как мне сохранить круг в том же положении, когда я изменяю размер?

Question

У меня есть такой кружок.

<div id="mycircle" style="border:2px solid red; height:72px; width:72px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; pointer-events: none;"></div>

Я изменяю размер круга с помощью ползунка.

<script>
$(".js-range-slider").ionRangeSlider({
    hide_min_max: true,
    hide_from_to: true,
    min: 10,
    max: 241,
    from: 72,
    onStart: function (data) {    
    },
    onChange: function (data) {
        // called every time handle position is changed
        var slider = $(".js-range-slider").data("ionRangeSlider");
        var val = slider.result.from;

        // set size of circle
        $("#mycircle").css({height: val + 'px', width: val + 'px'});
    }
});
</script> 

Проблема в том, что положение круга в верхний / левый. Я хочу, чтобы центр круга оставался в центре при изменении размера круга. Я не могу понять, как это сделать.