居中对齐 · 前端

## [**传统布局**](https://www.kancloud.cn/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)