Centering vertically a web page
Centering vertically a web page; consider it as a waste time trying to achieve it with CSS. The most practical solution is to use JavaScript.
e .js file
Copy/paste the following script in a file named for example: center.js
function align()
{
var lmt = document.getElementById('center);
var container = document.documentElement;
if(lmt && container)
{
var containerHeight;
if (container.innerWidth)
{
containerHeight = container.innerHeight;
}
else
{
containerHeight = container.clientHeight;
}
var lmtHeight;
if (lmt.innerWidth)
{
lmtHeight = lmt.innerHeight;
}
else
{
lmtHeight = lmt.offsetHeight;
}
var y = Math.ceil((containerHeight - lmtHeight) / 2);
if(y < 0)
{
y = 0;
}
lmt.style.position = "relative";
lmt.style.top = y + "px";
}
if (document.getElementById)
{
document.body.style.visibility = 'visible';
}
}
function addevent(obj,evt,fn,capt){
if(obj.addEventListener)
{
obj.addEventListener(evt, fn, capt);
return true;
}
else if(obj.attachEvent)
{
obj.attachEvent('on'+evt, fn);
return true;
}
else return false;
}
if (document.getElementById && document.getElementsByTagName)
{
addevent(window, 'load', align, false);
addevent(window, 'resize', align, false);
}
e .html file
For your page to be centered, you must call the .js file.
The page will be displayed as such:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<!-- [...] -->
<script type="text/javascript" src="center.js"></script>
</head>
<body>
<div id="centering">
<!Put the code of your webpage here. It will be centered -->
</div>
</body>
</html>
Implementation
The align() function defined in the .js file will retrieve the content that should be centered. In this example, the item having the ID [id = "center"] will be centered.
var lmt = document.getElementById('center ');
The same goes for the .html page, the contents found between the <div id="center"></div>, will be centered.
Note : This tip will only be effective if the user has javascript enabled in their browser.
.html tags for inserting picture to the web page