.parent {position: relative;}
.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

Use this CSS & remove your css.

trying to resize the ui-dialog but when using below css, when i try to resize, it jumps to the top left side

$('.ui-dialog').css({   
                width: iLength,
                'top':'50%',
                'left': '50%',
                'position': 'fixed',
                'transform': 'translate3d(-50%,-50%, 0)'
            });

any idea what i am doing wrong here

also need to be working when browser is resized

i tried with positions relative and absolute but it does not center in any case