为什么我的二列布局不能居中
<!--双列布局*/-->
<!DOCTYPE <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>布局</title>
<style type="text/css">
body{ margin:0;padding:0; }/*用于清除样式*/
div{ text-align:center; line-height:50px;}
.main{width:800px;height:500px;margin:0 auto;}
.left{width:400px;height:500px;float:left;background:yellow;}
.right{width:400px; height:500px;float:right; background:#ccc;}
</style>
</head>
<body>
<div class="main">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
