html - Prevent jQuery slideUp jump with margins -

i have overlay set via

top:50% left:50% 

and calculated margin-top , margin-left position in middle of screen.

i want slide rid of it, starts going crazy because of margins.

check out fiddle has same results. can do? can't rid of margins unless there's better way position in middle of screen.

https://jsfiddle.net/edjrdy61/1/

if want prevent jump margin, must force margin since jquery slideup() change margin @ runtime.

try this:

.foo {     width:100px;     height:100px;     background:green;     margin-top:100px !important; } 

but if want better way align middle-center of screen, use absolute or fixed position. example:

.foo {     width:100px;     height:100px;     position: absolute;     top: 50%;     left: 50%;     transform: translate(-50%, -50%);     background:green; }