position垂直居中 · 前端

**等式：** `top + margin-top + border-top +padding-top +width + padding-bottom + border-bottom + margin-bottom + bottom （9个值）= 包含块的内容的高度 ` 当设置top/bottom为0 过度约束后可以设置margin/height为auto 以对margin/height自动调解 ``` <!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: auto; background-color: #fba; position: absolute; top: 0; bottom: 0; } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> </body> </html> ``` ![](https://img.kancloud.cn/d5/da/d5dad3cf927b6e7d2f160fb59b38dc4a_549x403.png) ``` <!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; top: 0; bottom: 0; margin-bottom: auto; margin-top: auto; } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> </body> </html> ``` ![](https://img.kancloud.cn/98/e3/98e3ca2f2516070471171f3ff89ab04f_702x399.png)