center-contentHappy Valentine’s Day! Have you ever wanted to center content on a page both horizontally and vertically? This simple html, css, and javascript template will enable you to do just that.

First take a look the example page. You’ll notice that the text and image section is centered both horizontally and vertically on the page. In Firefox and other similar browsers this is accomplished purely by the use of div tags and a CSS document. Here is a copy of the html document.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Happy Valentine's Day!










This is an example page with the content centered both horizontal and vertically using CSS and Javascript.



Happy Valentine's Day

Hearts


For more details see the article Centering content horizontally and vertically on a page.  Thanks to Pixabella for the hearts.








</body>
</html>

Here is the stylesheet. You’ll notice we have set up a few div’s. The first is the outer bounding area. This does the centering in Firefox and sets up a pseudo table format for correct calculation of the content’s width and height. The second is the container, which contains the elements to be centered. And content is the only div element in this particular document filled with paragraphs, images, and headings. 

@charset "utf-8";
/* CSS Document */

html
{
	height:100%;
	width: 100%;
}


body
{
	background:#FFCCCC;
	vertical-align:middle;
	text-align:center;
	margin:0px;
	min-height:540px;
	min-width:540px;	
	height: 100%;
	overflow: hidden;
}

div.bounding
{
	height:100%;
	width:100%;
	vertical-align:middle;
	text-align:center;	
	padding:0px;
	overflow:auto;
	display:table;
}

div.container
{
	margin-top:auto;
	margin-bottom:auto;
	position:relative;
	vertical-align:middle;
	display:table-cell;
}

div#content
{
	margin-left:auto;
	margin-right:auto;
}

div.content
{
	color: #5b613b;
	font-size: 11px;
	font-weight: bold;
	font-family: arial;
	text-align:center;
	width: 720px;
}

h1
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color:#5F0B09;
	font-size: 18px;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
}

img
{
	border: 0px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}


p
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color:#FF0033;
	font-size: 10px;
	text-align:left;
	line-height: 26px;
	margin-right: 5px;
	margin-left: 5px;
}

Internet Explorer doesn’t always calculate the size of the browser window correctly and needs a little help from a friend. In this case Javascript saves the day. Save this as center.js in the same folder as the page or update the javascript reference to a subdirectory.

// JavaScript Document
function getWindowHeight() {
	var windowHeight = 0;
	if (typeof(window.innerHeight) == 'number') {
		windowHeight = window.innerHeight;
	}
	else {
		if (document.documentElement && document.documentElement.clientHeight) {
			windowHeight = document.documentElement.clientHeight;
		}
		else {
			if (document.body && document.body.clientHeight) {
				windowHeight = document.body.clientHeight;
			}
		}
	}
	return windowHeight;
}
function setContent() {
	if(navigator.appVersion.indexOf("MSIE"))
	{
		if (document.getElementById) {
			var windowHeight = getWindowHeight();
			if (windowHeight > 0) {
				var contentElement = document.getElementById('content');
				var contentHeight = contentElement.offsetHeight;
				if (windowHeight - contentHeight > 0) {
					contentElement = document.getElementById('container');
					contentElement.style.position = 'relative';
					contentElement.style.top = ((windowHeight / 2) - (contentHeight / 2)) + 'px';
				}
				else {
					contentElement.style.position = 'static';
				}
			}
		}
	}
		document.getElementById('container').style.opacity = 1;
		document.getElementById('container').style.filter = "alpha(opacity="+1+")";
}
window.onresize = function() {

		setContent();
}

You’ll also notice that is sets a definition for window.onresize. This enables it to recenter the content whenever the user resizes their browser.