怎么把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>
2017-01-10
<!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; float: left;margin-left: 275px;}
? ? #mainbody{border:1px solid #999; width: 100% ;background: red;clear:both;}
? ? #footer{border:1px solid #999; width: 120px;background: blue; left;margin-left: 290px;}
? ? .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>