html - 如何在集成滚动条宽度的主体内准确地将 div 水平居中？

Question

我试图将一个 div 居中放置在 body 的中心，这样左边的边距和右边的边距(滚动条的边距)是相同的。

我的意思是: Website 顶部蓝色标题居中，左右边距相同。

但是当我尝试自己编写代码时，滚动条宽度正在操纵边距和大小...

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>

创建上面那个页面的那个 child 似乎没有使用任何更好的 css，所以技巧在哪里？

Answer 1

这是我对自己问题的回答，我不确定是否应该像这样使用它，但我只是从正文中删除了 100% width。

不知道为什么 css 会这样，但我检查了网站源并且它没有任何主体宽度，所以我只是试了一下。