Show top/left div corner in the middle of the browser screen?

Posted on 2008-11-18
Last Modified: 2013-11-05
I'm trying to show a "div" element to the user and i want it to show in the center of is browser screen.

I want to position the div top/left corner at the top/left/center of the user screen..

Anybody can help?
Question by:jabcoco
    LVL 3

    Accepted Solution

    Hello jabcoco,

    Please look at the attached code snippet.  This should be a simple example of what you are trying to accomplish.  This takes the div and places it in the center of the user's browser window.

    Please note that the div has "position:absolute" specified.  This is what allows it to be positioned anywhere dynamically.

    Please let me know if you have trouble with this script or if it does not do what you are trying to accomplish.

    Hope this helps!
    <script language="javascript">
    function toggleDiv()
    	var div = document.getElementById("floatDiv");
    	if ( == "none")
  = "inline";
    		var IE=document.all;
    		var iXPos;
    		var iYPos;
    		if (!IE)
    			iXPos = self.innerWidth / 2;
    			iYPos = self.innerHeight / 2;
    			alert("self.innerWidth: " + self.innerWidth
    			+ "\n self.innerHeight: " + self.innerHeight
    			+ "\n iXPos: " + iXPos + "\n iYPos: " + iYPos);
    			iXPos = (document.body.clientWidth) / 2;
    			iYPos = (document.body.clientHeight) / 2;
    			alert("document.body.clientWidth: " + document.body.clientWidth
    			+ "\n document.body.clientHeight: " + document.body.clientHeight
    			+ "\n iXPos: " + iXPos + "\n iYPos: " + iYPos);
  = "none";
    Form Field One: <input name="ff1" type="text"/>
    Form Field Two: <input name="ff2" type="text"/>
    <br/><input type="button" value="Toggle Div" onclick="toggleDiv()"/>
    <div id="floatDiv" style="position:absolute;display:none">
    Floating Div

    Open in new window

    LVL 10

    Author Closing Comment

    Work's perfectly!
    Exactly what I'm looking for! :)


    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    Join & Write a Comment

    Suggested Solutions

    Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
    This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
    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…

    754 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

    20 Experts available now in Live!

    Get 1:1 Help Now