盒子水平居中布局（如margin:0 auto） · 前端

元素在其父元素中水平方向的位置由以下margin、border、padding、width幾個屬性共同決定，水平布局必須滿足以下等式 **等式：** 子元素的`margin-left + border-left +padding-left +width + padding-right + border-right + margin-right （7個值）= 父元素的寬度 ` 等式必須滿足，如果相加等式不成立，則成為過度約束，則等式自動調整調整方式： * 七個值中沒有auto，則流游覽器會自動調整margin-right的值七個值中有3個可以設置為auto『width（默認auto）、margin-left（默認0）、margin-right（默認0）』 * 如果將一個寬度和一個外邊距同時設置為auto,則寬度會調整到最大,設置為auto的外邊距會自動為0 * 如果將三個值都設置為auto,則外邊距都是0,寬度最大 * 如果將兩個外邊距設置為auto,寬度固定值,則會將外邊距設置為相同的值（居中） ``` <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>site title</title> <style type="text/css"> .box1{ width: 800px; height: 200px; background-color: #bfa; position: relative; } .box2{ width: 200px; height: 200px; background-color: #fba; } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> </body> </html> ``` 父元素的寬度為800 以下是子元素的幾個值相加為800的情況 | margin-left | border-left | padding-left | width | padding-right | border-right | margin-right | | --- | --- |--- | --- |--- | --- |--- | | 0 | 0 | 0 | 200 | 0 | 0 | 0（自動600） | | 100 | 0 | 0 | 200 | 0 | 0 | 400（自動500） | | 0 | 0 | 0 | auto（自動800） | 0 | 0 | 0 | | 200 | 0 | 0 | auto（自動400） | 0 | 0 | 200 | | auto（自動400） | 0 | 0 | 200 | 0 | 0 | 200 | | auto（自動為0） | 0 | 0 | auto（自動700） | 0 | 0 | 100 | | 0 | 0 | 0 | auto（自動800） | 0 | 0 | auto（自動為0） | | auto（自動為0） | 0 | 0 | auto（自動800） | 0 | 0 | auto（自動為0） | | auto（自動為300） | 0 | 0 | 200 | 0 | 0 | auto（自動為300） | | 0 | 0 | 0 | 1000 | 0 | 0 | 0（自動為-200） |