title: jQuery-UI draggable: div doesn't follow mouse correctly horizontal
body: <p>Here is a short <a href="http://jsfiddle.net/tmuecksch/RErSF/6/" rel="noreferrer">demo</a>. I want to make a dialog draggable. It is horizontal centered via css the following way:</p>
  
  <pre><code>div.dialog-container {
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;
  }
  </code></pre>
  
  <p>My dialog contains a header and a content div. The whole dialog is to be dragged around by dragging the header. So i used the jQuery-UI .draggable() widget like this:</p>
  
  <pre><code>$("div.dialog-container").draggable({
      handle: "div.dialog-header"
  });
  </code></pre>
  
  <p><strong>The Problem is:</strong> dragging the dialog around works but not the way it is intended to. Vertically the dialog follows the mouse perfect <strong><em>but horizontally it follows the mouse too slow</em></strong> so it is possible to leave the dialog while dragging around <em>(for example click on the header on the very right and drag the dialog to the right</em>). <strong>The interesting thing is:</strong> Removing "margin: auto;" fixes the problem but the element is not centered anymore. Centering the div with javascript is no option.
  Do you have any ideas on how to fix that problem?</p>