centralizar tudo

ola pessoal quero fazer o seguinte e não estou conseguindo fazer. alguem pode me ajudar.

#tudo {
	width:100%;
 position:relative; /*Contexto de posicionamento */
	background:#000;
	margin:0 auto;
	text-align:center;
	min-height:100%;/**/
	border:dotted #999;
	border-width:0 1px;
	}

#topo {
	background:#cfc url(014.jpg) repeat-y right;
	width:100%;
	height:300px;
	border-bottom:1px dotted #999;
	text-align:center;
	padding-top:1px;
	}

#principal {
	width:750px;
	padding-left:20px;
	float:left;
	padding-top:10px;
	text-align:justify;
	}

<div id="tudo">
<div id="topo">
<h1>Topo</h1>
</div> <!-- Fim da div#topo-->

<div id="principal">
<h2>Coluna principal</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eleifend, purus quis laoreet faucibus, ante augue malesuada mi, id rhoncus augue lorem eget elit. Ut sollicitudin sodales purus. Phasellus libero felis, blandit nec, commodo ut, imperdiet ut, nibh. Suspendisse potenti. Donec ullamcorper cursus dolor. Duis vitae ipsum.</p>
<p>Maecenas dapibus hendrerit diam. Morbi varius, massa id pretium accumsan, nunc lorem congue libero, ut euismod metus libero id nulla. Duis posuere odio sed velit vulputate venenatis. Suspendisse et dui ac metus auctor fringilla. Curabitur interdum augue a pede.</p>
</div> <!-- Fim da div#principal -->

</div> <!-- Fim da div#tudo-->