Generally hard-coded CSS is used to position elements. jQuery provides an easy manipulation of CSS over these HTML elements. Using jQuery we can write re-usable CSS positioning properties and assign that to element(s) on certain events.
A Div element has fair choices over other document region/division elements. These divs are used to show dialogue or messages. Sometime we like to show messages in the centre of the screen or window. To do this we fix the display of a div containing some messages or dialogue in the centre of the window screen using CSS. There are two types of positioning; they are:
- Relative to HTML rendered document
- Irrelative to document but with window/screen
If we use a relative position (with document instead of window), and our content document is very big then the calculated center position may be out of the visible/display area of the screen and that will require scrolling to see the message div. So the best option is to divide the window height/width in 2 equal parts to get the cetner and accordingly set the CSS.
There is a wonderful position attribute "absolute" that detaches the div from its associates but with a window/screen. This "absolute" positional property gives the position to the div according to the window. So it will solve our problem by considering the window instead of the document. We are using the left and top properties to assign the starting points and these two points are the points that have been calculated automatically by dividing the window into two equal parts.
.centreElementPosition
{
position: absolute;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
margin-left: -100px;//note this is a negative value
margin-top: -100px; //this is also a negative value
}
In the above CSS class, please note the margin values that are negative. Here it works to override (better to say "extends") the left and top property by positioning the box area -100px before from the point where the left & top lies.
The main problem with the preceding idea is that it works with a known height & width elements as margin-left and margin-top requires the value to re-position the element. These values are the half of the height & width of the element being positioned to the centre. In my above example class, I have given 100px to the margin-top as well as to the margin-left because my div element is of the same height & width, i.e. 200px. You will see the applied CSS to my div in the following image:
![margin-left.png]()
The other important point it is necessary to be concerned about is that there are two types of elements in terms of the CSS attribute "display"; they are:
- Block level elements (ex. div, p, h<n> etc.) and //here h<n> is for h1, h2 and h3.
- Inline elements (ex. Images, hyperlinks etc).
Our "absolute" position works well with block-level type elements but inline elements require an additional CSS property to be applied to the display: block.
If we are positioning inline elements like images then we need to add this display:block as below:
.centreElementPosition
{
display:block;
position: absolute;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
margin-left: -100px;
margin-top: -100px;
}
But this approach requires a margin-left & margin-top property value and this value depends on the width & height of the element. Hence, a different element may have a different height/width and we must write a different CSS with a calculated figure for the margin-left and margin-top properties.
So, we will write some jQuery code that will automatically calculate the height & width of our elements and apply these CSS properties on them to make it appear in the centre of the window. See:
function CenterElementPosition(){
$('.centreElementWithJQuery').CSS ({
position: 'absolute',
left: ($(window).width() - $('.centreElementWithJQuery').outerWidth()) / 2,
top: ($(window).height() - $('.centreElementWithJQuery').outerHeight()) / 2
});
}
In the above function, you may have noted that we are only using the left and top properties of CSS . We are not using the margin-left or margin-top properties here. But we are calculating the exact left & top position instead of supplying it 50% and then shifting the position using a negative margin value.
I have used outerWidth() and not the width() method of jQuery. jQuery provide us two versions of width or height functions:
- width() and
- outerWidth()
And like the width methods, height() & outerHeight().
width() gives the only content-area's width while outerWidth() gives the actual content-area width plus area occupied by border and padding. We need to include the border width with the actual width of the element. That's the reason we are using the outerWidth() function of jQuery.
Thus:
The total left (not occupied with element) width to be divided in 2 parts for centering:
= myScreenWindowWidth - ( myElementWidth+ border + padding)
So, the left property will be assigned the exact calculated value as:
left: (myScreenWindowWidth - ( myElementWidth+ border + padding) ) / 2
And so the top property is calculated. It is a very simple approach to make the centre of an element using jQuery to appear.
![centered div.png]()
Thus our complete jQuery code would be as below:
<script type="text/javascript">
$(document).ready(function () {
//this is for setting first time on doc ready
CenterElementPosition();
//this is for re-setting on window resize
$(window).resize(function (e) { e.preventDefault(); CenterElementPosition(); });
});
function CenterElementPosition()
{
$('.centreElementWithJQuery').CSS ({
position: 'absolute',
left: ($(window).width() - $('.centreElementWithJQuery').outerWidth()) / 2,
top: ($(window).height() - $('.centreElementWithJQuery').outerHeight()) / 2
});
}
</script>