Positioning DIV to the Center of Browser Viewport

Positioning DIV to the center of Browser Viewport

Sometimes I write some JS code to prepare my HTML mockups. In this post I am describing the step-by-step approach on how to position a DIV to the center of browser's viewport.

Case
Assume that you have a DIV and you want to show it upon clicking a link or button. And that DIV must appear exactly on the center of the browser's window. Technically browser's display area is called "View Port". So our aim is to display a DIV to the center (origin) of the view port.

How to do this?
1. Create the DIV.
2. Specify CSS properties
3. Write a few lines of Javascript code to position the DIV
4. Insert an action "onClick" to a button or link in the HTML.

Step 1
Write the HTML code for the UI and enclose the code chunk with a DIV. Specify some valid ID for the DIV. For example "AddUserDialog".

Step 2
A DIV element, by default will be displayed inline. A dialog box or some other "windowed" UI requires the visibility to be turned off/on when required. So let us "hide" the DIV by specifying an inline style. Let's set the visibility to off, by using "style='display:none' ". This will hide the DIV from being displayed.

Step 3
Open the CSS file and create an ID class definition for 'AddUserDialog'.

#AddUserDialog {
}

Then specifiy the width of the UI. For example lets fix to 600px.

#AddUserDialog {
width:600px;
}

Then specify the position. Since we are going to display this in a fixed position we will select fixed-positioning.

#AddUserDialog {
width:600px;
position:fixed;
}

Then specify a Z-INDEX value. This could be any number.

#AddUserDialog {
width:600px;
position:fixed;
z-index:10000;
}

Now we have a hidden DIV with 600px width and fixed positioning support.

Step 4
Let us position the DIV layer to the center of the Screen. To do this, you will need to write a few lines of Javascript code as a function() . Also you should consider the case of multi-browser support.

Now somewhere in the Webpage, an action has to be triggered. This could be a click on a link or a button. So to trigger the function lets write something like

< type="button" value="btnShowDialog" style="font-weight: bold;">onClick="ShowDialog('AddUserDialog')">

The 'onClick' is the event and the action code is "ShowDialog('AddUserDialog')". Now we need to write the javascript function.

Let start with writing the function.

function ShowDialog(x)
{
}

Then get the inner width and inner height of viewport.

function ShowDialog(x)
{
vpWidth=self.innerWidth;
vpHeight=self.innerHeight;
}

Then get the DIV's width and height. You will need to use the offsetWidth and offsetHeight properties.

function ShowDialog(x)
{
//get viewport's width and height
vpWidth=self.innerWidth;
vpHeight=self.innerHeight;

//get dialog's width and height
dialogWidth=x.offsetWidth;
dialogHeight=x.offsetHeight;

}

Now, you need to find how many pixels from top and left, should the dialog DIV be displayed. To achieve this, use the simple method of finding origin. To find the origin, check the image below. The Red rectangle is the browser's viewport and the blue rectangle is the DIV dialog.



To position the dialog to the center do the following. Divide the vpWidth by 2 and vpHeight by 2. Then divide the dialogWidth by 2 and dialogHeight by 2. Then subtract the (dialogWidth/2) from (vpWidth/2). This will give the value of how many pixels from left. Apply the same to dialogHeight/2 and vpHeight/2. This will give how many pixels from top. Then set the resulting values to the dialog's 'top' and 'left' properties.

function ShowDialog(x)
{
//get viewport's width and height
vpWidth=self.innerWidth;
vpHeight=self.innerHeight;

//get dialog's width and height
dialogWidth=x.offsetWidth;
dialogHeight=x.offsetHeight;

//calculate position
dialogTop = (vpHeight/2) - (dialogHeight/2);
dialogLeft = (vpWidth/2) - (dialogWidth/2);


//Position the Dialog
x.style.top =dialogTop+"px";
x.style.left =dialogLeft+"px";

a = x.style.display="block";

}

This will show the DIV layer and position it to center. That's it. :-)


Here is the sample of my mock-up.


- Rajesh Sundaram