居中對齊 · 前端

## [**傳統布局**](http://www.hmoore.net/a173512/qianduan/2016098) ## **一個子元素對齊** ``` <html lang="en"> <head> <meta charset="UTF-8"> <title>task1_4_1</title> <style> *{ margin: 0; padding: 0; } header{ background-color: aqua; min-width: 1200px; height: 80px; } header>.header{ background-color: aquamarine; width: 1200px; height: 80px; margin: 0 auto; } .wrapper{ height: auto; background-color: blueviolet; } .container{ position: relative;//必須的否則會轉到上一級直到body background-color: chartreuse; width: 1200px; height: 600px; margin: 0 auto; border:solid 1px red; } /* 此方法適合一個居中 */ #center{ width: 400px; height: 200px; background-color: #ccc; position: absolute; left: 50%; top:50%; /*利用transform達到水平垂直居中效果*/ transform: translate(-50%, -50%); overflow: hidden; } #footer{ background-color: aqua; min-width: 1200px; height: 80px; } </style> </head> <body> <div class="wrapper"> <header> <div class="header"> 阿三大蘇打 </div> </header> <div class="container"> <div id="center">1</div> </div> <div id="footer"> </div> </div> </body> </html> ``` ![](https://img.kancloud.cn/3a/0e/3a0e32fe63870a24719972dc72c94a63_1713x801.png)