today i had a css file and i was trying to align a div i had and i wanted to make it align center

but there is not center propertie there is only align text or float left or float right but no float center so how can you make a div section align to cneter? well, its easy all you have to do is use this:

CSS CODE EXAMPLE
margin:0 auto;


its that simple

this the actual code i had in my .css file:

.main {
padding: 10px;
width: 798px;
border:1px solid #ccc;
margin:0 auto;
}


NOTE: in order for margin:0 auto; to work, you must make sure to put the width of the div, if you only put margin:0 auto; without width, then it will not align to the middle.

let me give you two examples..

in this example, the align center does not work when i test it internet explorer:

if you are using windows like i am, start a new notepad and copy and paste the following code. save it as test.html - then open it with internet exploere.. im using ei version 9

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Center Div in Internet Explorer by Wallpaperama.com</title>
<style type="text/css">
body {
background-color: #272727;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
}.main {
width: 980px;
padding: 10px;
margin:0 auto;
border: 12px solid #999;
background-color: #FFF;
}
</style>
</head>
<body>
<div class="main">
<div id="content">
<H1>HI THERE</h1>
</div><!-- content -->
</div><!-- main -->
</body>
</html>


as you can see, its not aligning in the center of the page right?? now all the HTML code with the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Center Div in Internet Explorer by Wallpaperama.com</title>
<style type="text/css">
body {
background-color: #272727;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
}.main {
width: 980px;
padding: 10px;
margin:0 auto;
border: 12px solid #999;
background-color: #FFF;
}
</style>
</head>
<body>
<div class="main">
<div id="content">
<H1>HI THERE</h1>
</div><!-- content -->
</div><!-- main -->
</body>
</html>


did the second example worked? did you noticed the difference? there was not difference in the CSS code, the only difference was this line:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

hope that helps..

here's another example:
Example Code. Try It. 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Centered Div By Wallpaperama !!!!</title>
<style type="text/css">
.main {
	width: 980px;
	padding: 10px;
	margin:0 auto;
	border: 1px solid #F00;
}
</style>
</head>
<body>
<div class="main">Centered Div By Wallpaperama !!!!</div>
</body>
</html>