Center an Element to the center of the page

To centre an element, that has an absolute position, to a page, we must first discover some properties of the current window:

• ·         Window size (getWindowSize())
• ·         Window scroll position (getScrollXY())

If our element is for example:

...whose element is represented by the variable obj (for this example):

We want to set the x and y positions of this element.

Firstly recover the properties:

Now define the top y position of the element:

This says that is the element is taller than the page, then we shall put the top at the scroll position to ensure the top of the element is visible, otherwise we set the top to the window height – the element height divided by 2 plus the scroll position.

To stop the element abutting the top of the page, we can offset it slightly:

Next define the left edge position of the element:

If the element is wider than the page, this value will be negative so:

Now set the element position:

Place this inside a function for easy use:

So now we can centre an object to the page by calling:

centerObject(document.getElementBy(“sample”);

or if to centre the object once it has loaded (like an image) we can set the onload parameter: