Div centered vertically and horizontally

Posted on 2011-04-30
Last Modified: 2012-06-27
I need a way to centre a Div on a page both vertically and horizontally but also to reposition on resize or page scroll.

I found an example in JQuery which does what I need, however Id like to keep everything under the same language, so instead of changing all my Javascript t JQuery, Id prefer to find this in Javascript.


		left: ($(window).width() - $('.className').outerWidth())/2,
		top: ($(window).height() - $('.className').outerHeight())/2


// To initially run the function:

Open in new window

Any ideas, or suggestions for a Javascript version?
Question by:tonelm54
    LVL 20

    Expert Comment


    CSS should do it for you:

    #centered { position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; width: 100px; height: 100px; border: 1px dashed red; }

    <div id="centered"></div>

    Author Comment

    The problem is that wont reposition when the screen is resized.

    Ive tried to make my own code, but doesnt seem to work, hopefully its easy to understand.

            <script language="Javascript">
                document.body.onresize = onWindResize();
                function onWindResize() {
                    document.getElementById('rePostitionDiv').offsetLeft = screen.width - document.getElementById('rePostitionDiv').style("width") / 2;
                    document.getElementById('rePostitionDiv').offsetTop = screen.height - document.getElementById('rePostitionDiv').style("height") / 2;
                //Call it now
            <div id="rePostitionDiv" style="width:200px; height:200px; background-color:Aqua;">

    Open in new window

    LVL 20

    Accepted Solution


    //Try this:

    window.onload = onWindowResize;
    window.onresize = onWindowResize;

    function onWindowResize() {
      var element = document.getElementById('rePostitionDiv'); = "absolute"; = ( screen.availWidth - element.clientWidth ) / 2; = ( screen.availHeight - element.clientHeight ) / 2;


    Author Comment

    It doesnt re-position when the window is resized :-(

    Featured Post

    Do You Know the 4 Main Threat Actor Types?

    Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

    Join & Write a Comment

    I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
    Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    734 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    17 Experts available now in Live!

    Get 1:1 Help Now