Center a div using Javascript

Question

I'm trying to center a div (screen center). This div is not a direct child of the body so I can't use css. Currently I use the following jQuery code in order to center it on my page:

    var dialog = $('#MyDialog');
    dialog.css('left', ($('body').width()/2) - (dialog.width()/2));
    dialog.css('top', ($('body').height()/2) - (dialog.height()/2);

The goal is to remove jQuery, I've already written this:

var showDialog = function(){

    var body = document.body;
    var html = document.documentElement;

    var bodyHeight = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
    var bodyWidth = Math.max( body.scrollWidth, body.offsetWidth, html.clientWidth, html.scrollWidth, html.offsetWidth );

    var dialogWidth = 800;
    var dialogHeight = 560;

    var dialog = document.getElementById('MyDialog');
    dialog.style.left = (bodyWidth/2) - (dialogWidth/2) + 'px';
    dialog.style.top = (bodyHeight/2) - (dialogHeight/2) + 'px';

    dialog.style.display = "block";
}

The point is that dialogWidth and dialogHeight are dynamic. How can get them?

what do you mean you can't use CSS (you are even manipulating CSS in your code)? — N. Ivanov, Jan 16 '18 at 10:11
_"This div is not a direct child of the body"_ that doesn't mean that you can't use CSS. Show us some HTML. — Turnip, Jan 16 '18 at 10:11
Please update your question with a [mcve] demonstrating the problem, ideally a **runnable** one using Stack Snippets (the `[<>]` toolbar button; [here's how to do one](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-do-a-runnable-example-with-stack-snippets-how-do-i-do-tha)). For one thing, I suspect you're mistaken that you need to use JavaScript for this. But even if you do, that will give people a clear idea what you need and let them show you a working solution (by copying the snippet). — T.J. Crowder, Jan 16 '18 at 10:12
Well, I thought It was not possible to use CSS since height and width are dynamic. The answer of @Mozè Raguzzini is perfect! — Emaborsa, Jan 16 '18 at 10:24
Can't post the entire HTML code, it is 20000 lines long generated by a framework, — Emaborsa, Jan 16 '18 at 10:33

score 8 · Accepted Answer · answered Jan 16 '18 at 10:15

Centering through CSS is a better pratice, if you can center it with JS, you can with css for sure.

try with:

#MyDialog {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: xxx; // Any width will be fine
    height: xxx: // Any height will be fine
}

score 1 · Answer 2 · answered Jan 16 '18 at 10:33

You need to use DOM style

try this :

function myFunction() {
    document.getElementById("MyDialog").style.position = "relative";
    document.getElementById("MyDialog").style.left = "50%";
   document.getElementById("MyDialog").style.right = "50%";
}

Center a div using Javascript

2 Answers2