怎么把wrap的header和footer居中啊？
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>task练习</title>
<style type="text/css">
*{margin: 0 ;padding: 0;}
#wrap{border: 1px solid #999;width: 700px; margin: 0 auto ;background: gray; }
#header{border:1px solid #999; height: 150px ;width: 200px; background: yellow;}
#mainbody{border:1px solid #999; height: 400px; width: 100% ;background: red;}
#footer{border:1px solid #999; width: 120px;background: blue;}
.team{border: 1px solid #999; height: 80px;width: 80px;}
.same{border: 1px solid #999;height: 80px;width: 80px;}
.same{margin: 15px; }
p{text-align: center;}
</style>
<body>
<div id="wrap">
<div id="header">
<div class="team">
<p>团队LOGO</p><p>80x80</p>
</div>
</div>
<div id="mainbody">
<p>无的放矢风景好卡萨丁就发示范课，无的放矢风景好卡萨丁就发示范课，无的放矢风景好卡萨丁就发示范课无的放矢风景好卡萨丁就发示范课无的放矢风景好卡萨丁就发示范课无的放矢风景好卡萨丁就发示范课无的放矢风景好卡萨丁就发示范课无的放矢风景好卡萨丁就发示范课</p>
<p>无的放矢风景好卡萨丁就发示范课无的放矢风景好卡萨丁就发示范课无的放矢风景好卡萨丁就发示范课无的放矢风景好卡萨丁就发示范课无的放矢风景好卡萨丁就发示范课</p>
</div>
<div id="footer">
<div class="same">
<p>个人LOGO</p>
<p>80x80</p>
</div>
<div class="same">
<p>个人LOGO</p>
<p>80x80</p>
</div>
<div class="same">
<p>个人LOGO</p>
<p>80x80</p>
</div>
<div class="same">
<p>个人LOGO</p>
<p>80x80</p>
</div>
</div>
</div>
</body>
