如何在合並滾動條寬度的主體內將div精確水平居中？

Question

我正在嘗試將div置於主體的中心，以便左側的邊距和右側的邊距（滾動條的邊距）相同。

這就是我的意思： 網站頂部的藍色標題位於中間的中間，左右空白相同。

但是當我嘗試自己編寫代碼時，scrollbarwidth正在操縱邊距和大小...

 body{ width: 100%; height: 100em; background-color: aqua; } div{ width: 100%; height: 100%; background-color: grey; margin-left: auto; margin-right: auto; } 

 <div></div> 

即使我縮小寬度，它的邊距仍然不一樣：

 body{ width: 98%; height: 100em; background-color: aqua; } div{ width: 100%; height: 100%; background-color: grey; margin-left: auto; margin-right: auto; } 

 <div></div> 

在上面創建該頁面的那個孩子似乎並沒有使用任何更大的CSS，那么訣竅在哪里呢？

Answer 1

這是我對自己問題的回答，我不確定是否應該像這樣使用它，但我只是從身體上去除了100% width 。

不知道為什么css會這樣，但是我檢查了網站資源，它沒有任何寬度，所以我嘗試了。

Answer 2

您可以使用視口寬度而不是百分比，並按如下所示設置邊距：

body {width:100vw}
div {margin:0 auto}