How to horizontally center draggable modal - css

Question

I have a pop up window that is supposed to be position:fixed and draggable. The issue is that whenever the window pops up it uses a css transition so all of its properties are animated. I have tried to use left:50% transformX:(-50%) to horizontally center it but the pop up window jumps horizontally when it appears (as it animates the transform). I have also tried centering it with left:0 right:0 margin:0 auto; but the window also jumps out of position when you begin to drag. These issues are only present when the window first appears or it is dragged for the first time, after the first drag everything works as expected.
I pass in the following options to the draggable setter.
elem.draggable({ start: function() {
$(this).css({transform: "none", top: $(this).offset().top+"px", left:$(this).offset().left+"px"});
} });
This fiddle centers with margin:0 auto
here is a fiddle demonstrating my problem
this fiddle centers with left:50% transform:translateX(-50%);
second fiddle

Answer 1

Have you tried giving the modal a width then using margin:0 auto; Typical in order to centre an element you need to give the element a width.
.centeredElement {
margin: 0 auto;
width: 960px;
}

Answer 2

The problem is that margin: 0 auto relies on the fact that the element's left and right properties are set to 0. You are seeing the jump because jQuery UI manipulates the left positioning, and it is no longer 0 after dragging the element. The same applies to the transformX:(-50%) method. This will only center the element horizontally if left is set to 50%.
The workaround is to set left: 50%, and then add margin-left: -40px to displace the element's width (i.e., a negative left margin based on half of the width of the element; in this case -40px since the element has a fixed width of 80px).
Updated Example
.box {
border-radius: 5px;
padding: 10px 15px 10px 15px;
min-width: 30px;
width: 80px;
height: 80px;
left: 50%;
margin-left: -40px;
position: fixed;
/* ... */
}