盒子水平居中布局（如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） |