为什么中间那块无法和两边的对齐？
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.middle{width:40%;height:100px;background:yellow;margin:0 auto;}
.left{width:30%;height:100px;background:blue;position:absolute;top:0;left:0;}
.right{width:30%;height:100px;background:red;position:absolute;top:0;right:0;}
</style>
</head>
<body>
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</body>
</html>
