position水平垂直居中 · 前端

``` <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>site title</title> <style type="text/css"> .box1{ width: 500px; height: 500px; background-color: #bfa; position: relative; } .box2{ width: 100px; height: 100px; background-color: #fba; position: absolute; margin:auto; left:0; right: 0; top: 0; bottom: 0; } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> </body> </html> ``` ![](https://img.kancloud.cn/71/e5/71e519593480dfeaf1ef9732b3e71a4a_422x378.png) 宽高不确定居中对齐布局 ``` <div style="position:absolute;left:50%;top:50%;background-color:#bfa;transform:translate(50%,50%);">内容</div> ``` <div style="position:absolute;left:50%;top:50%;background-color:#bfa;transform:translate(50%,50%);">内容</div>