position水平居中 · 前端

**等式：** `left + margin-left + border-left +padding-left +width + padding-right + border-right + margin-right + right （9個值）= 包含塊的內容的寬度 ` 當我們開啟了絕對定位后: 水平方向的布局等式就需要多添加left和right兩個值 ## ## **當發生過度約束：** **1、如果9個值中沒有auto則自動調整right值以使等式滿足** 例子1、包含塊的內容的寬度 =0+100+0===500，顯然0+100+0是湊不齊500的，這就是過度約束，那么right:0；這個設置是無效的，瀏覽器會自動調整right的值為400 ``` <!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; left:0; right: 0; } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> </body> </html> ``` ![](https://img.kancloud.cn/d4/36/d436799301af2783c7564c93928b16eb_608x421.png) **2、如果有auto,則自動調整auto的值以使等式滿足** 可設置auto的值：margin width left right 例子2、與例子1一樣過度約束，當with設置了auto則自動調整width的值為500，即0+500+0=500 ``` <!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: auto; height: 100px; background-color: #fba; position: absolute; left:0; right: 0; } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> </body> </html> ``` ![](https://img.kancloud.cn/30/e6/30e6fd3c1ed59a1c106dd82772d3936f_793x486.png) 例子3、與例子2一樣過度約束，當margin設置了auto則自動調整margin的值，即0+200+100+200+0=500 ``` <!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-left: auto; margin-right: auto; left:0; right: 0; } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> </body> </html> ``` ![](https://img.kancloud.cn/bb/04/bb04c6a3ab46b6864297dbcd6dc3598e_532x368.png) left與right的默認值是auto，所以不設置left與right時即left與right不確定時，會自動調整left與right的值，此時margin width的auto值是不生效的 ``` <!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-left: auto; margin-right: auto; left:auto; right: auto; } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> </body> </html> ``` ![](https://img.kancloud.cn/5b/a6/5ba6897bb1dfcb0f111fa53dc8f7704f_466x445.png)