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)