<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Centering in XML</title>
<style type="text/css">
<![CDATA[

/*	To avoid browser error caused by CDATA declaration. */

* {}

/*	A better practice would be to use an external stylesheet, but
	here I wanted to make it easier for you to see the styles. */

/* --- Irrelevant formatting styles --- */

body {
	margin: 0;
	padding: 0;
}
#div1, #div2, #div3 {
	width: 60%;
	border: 1px solid #c30;
	font-family: Tahoma, Verdana;
	color: #666;
}
#div1, #div2, #div3 p {
	padding: 0;
	line-height: 1.6em;
}

/* --- Code you care about --- */

#div1 {
	margin: 0 auto;
}

#center_div2 {
	text-align: center;
}
#div2 {
	margin: 0 auto;
	text-align: left;
}

#div3 {
	position: relative;
	left: 50%;
	margin-left: -30%;
}

]]>
</style>
</head>

<body>
<div id="div1">
	<p>This box is centered in most browsers, but not Internet Explorer.</p>
	<p>#div1 {<br />
&#160;&#160;&#160;&#160;&#160;&#160;margin: 0 auto;<br />
}</p>
</div>
<div id="center_div2">
  <div id="div2">
    <p>This box is centered in Internet Explorer, but only because its parent element is set to text-align: center.</p>
    <p>#center_div2 {<br />  
&#160;&#160;&#160;&#160;&#160;&#160;text-align: center;<br />
    }<br />
    <br />
    #div2 {<br />
&#160;&#160;&#160;&#160;&#160;&#160;margin: 0 auto;<br />
&#160;&#160;&#160;&#160;&#160;&#160;text-align: left;<br />
} </p>
    <p><em>(Thanks to Christopher for pointing this out! He requested that I provide a link to <a href="http://www.stopie.com/">StopIE.com</a>.) </em></p>
  </div>
</div>
<div id="div3">
  <p>This box is centered by positioning.</p>
  <p>#div3 {<br />
&#160;&#160;&#160;&#160;&#160;&#160;position: relative;<br />
&#160;&#160;&#160;&#160;&#160;&#160;left: 50%;<br />
&#160;&#160;&#160;&#160;&#160;&#160;margin-left: -30%; &#160;&#160;&#160;/* half of #div3's width of 60% */<br />
}</p>
</div>
</body>
</html>