I have a fixed div which I am trying to center vertically and horizontally. Yes, I know there are many question and tutorials to perform this. I checked and followed the instructions. Here's one that I implemented:

#draggable {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Now, I also want the div to be draggable. So it should start off at the center of the screen, then the user will have an option to drag it.

The problem is, when you start dragging it, the div suddenly moves higher. How can I center a fixed, draggable div?

JSFiddle

$('#draggable').draggable();

body {
  width: 2000px;
  height: 2000px;
  background-image: url(".jpg");
}
#draggable {
  background-color: red;
  color: lightblue;
  width: 200px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<script type="text/javascript" src="//code.jquery/jquery-2.1.4.js"></script>
<script type="text/javascript" src="//code.jquery/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery/ui/1.11.4/themes/ui-lightness/jquery-ui.css">

<div id="draggable">Drag Me!</div>

I have a fixed div which I am trying to center vertically and horizontally. Yes, I know there are many question and tutorials to perform this. I checked and followed the instructions. Here's one that I implemented:

#draggable {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Now, I also want the div to be draggable. So it should start off at the center of the screen, then the user will have an option to drag it.

The problem is, when you start dragging it, the div suddenly moves higher. How can I center a fixed, draggable div?

JSFiddle

$('#draggable').draggable();

body {
  width: 2000px;
  height: 2000px;
  background-image: url("http://www.freevector./site_media/preview_images/FreeVector-Square-Patterns-Set.jpg");
}
#draggable {
  background-color: red;
  color: lightblue;
  width: 200px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<script type="text/javascript" src="//code.jquery./jquery-2.1.4.js"></script>
<script type="text/javascript" src="//code.jquery./ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery./ui/1.11.4/themes/ui-lightness/jquery-ui.css">

<div id="draggable">Drag Me!</div>

Edit I updated the examples. draggable doesn't have a set height.

• javascript
• jquery
• html
• css
• jquery-ui

4 Answers 4

You could use draggable start method to modify css.

$('#draggable').draggable({ start: function() {

$(this).css({transform: "none", top: $(this).offset().top+"px", left:$(this).offset().left+"px"});

} });

http://jsfiddle/y2ehtjsu/4/

This gets current position calculated by browser and converts it into normal pixel value, on draggable start. If you are using draggable I sugggest you to familiarize yourself with this: http://api.jqueryui./draggable/

Improving on Maciej Krawczyk's answer.

You could put transform in a separate class (call it centered) and remove the class when user starts to drag. After all, usually the purpose of dragging something is to permanently change its position. This means you need the centering transform to work only once (when the div is first shown). You most probably do not need it to work neither when user drags the div nor at any later stage.

http://jsfiddle/y2ehtjsu/8/

The problem is that the draggable code doesn't seem to properly handle translated element positions. The easy way to fix that is to just remove the translate and start your position at 40%/40% which will center it since the width/height is 20%.

$('#draggable').draggable();

body {
  width: 2000px;
  height: 2000px;
  background-image: url("http://www.freevector./site_media/preview_images/FreeVector-Square-Patterns-Set.jpg");
}
#draggable {
  background-color: red;
  color: lightblue;
  height: 20%;
  width: 20%;
  position: fixed;
  top: 40%;
  left: 40%;
}

<script type="text/javascript" src="//code.jquery./jquery-2.1.4.js"></script>
<script type="text/javascript" src="//code.jquery./ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery./ui/1.11.4/themes/ui-lightness/jquery-ui.css">

<div id="draggable">Drag Me!</div>

Setting offset within ondragstart doesn't work, when you position your element using "margin:auto" equivalent (s.a. Bootstrap's m*-auto classes).

Removing positioning class works, but setting offset does not.

You have to reposition element beforehand in order to have correct dragging experience. F.e. when you show your window.

/** Opens dialog window
 *
 * @param {CustomEvent} event The trigger event.
 */
function OpenDialog(event) {
    $(event.target).removeClass(['d-none']);
    let css = $(`.dialog-content`, event.target).offset();
    requestAnimationFrame(
        () => $(`.dialog-content`, event.target)
            .removeClass(['mx-auto', 'my-auto', 'm-auto',])
            .offset(css)
            .trigger("click")
    );
}

.trigger("click") is there to trigger the code pulling window on top of the stack.