• Center you site, both horizontally & vertically using Css

  Date: Jun 24, 2010  |  Categories: Css  |  Written By: Mike Ballan  

Now gone are the days when we only have tables to make our websites and something I miss from those days is the ability to center align a website both horizontally & vertically. Now I’ve seen methods that use java and alike but all I really wanted was a simple Css option and I’m glad to say I’ve found one..!

For this to work you will need to make a class called whatever you want but I’ve called it “centered_div” for this example.

.centered_div {
	width:600px;
	height:100px;
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-300px;
	margin-top:-50px;
	background:#333333;
}

Next you will need to add this class to a div like below.

<div class="centered_div">Text goes here..!</div>

Now there are a few things you may need to change on the Css like if your site is 500px wide you will need to change the margin-left: to be 250px instead of 300px and the same goes for the height, as I like to think about it whatever your height/width is you will need to half it and make that the margin-left or margin-top value.

And once you have sorted all the height and widths out that’s it, No Java or hacks just plain Css.