使用text-align：center而不是text-align：left时的半边距

Question

我只是想出了一个奇怪的行为。我使用带有text-align: center的div和带有display: inline-block的内部div来使内部div居中。所以到目前为止没有什然后我在内部div上添加了一个左边距，因为我需要它从中心位置稍微向右移动。但我添加的边际总是错误的，我只是不明白为什么。所以我做了一些测试，并发现当你使用text-align: center时，你必须加倍边距才能得到正确的，但为什么呢？我真的很想了解这种行为。

我做了一个快速的小提琴，所以你可以看到我的意思：https://jsfiddle.net/wnjg5ks4/

万一你不理解这一部分：

.container2 {
    text-align: center;
    width: 400px;
    margin-left: -175px;
}

margin-left: -175px是＆＃34;删除＆＃34; ＆＃34;自然＆＃34;左侧和居中版本之间的空间，因此更容易比较边距。

Answer 1

您的子元素.center正确居中。红色框和它的边距正在居中。由于它是唯一的元素，您可以将边距加倍以获得所需的移位，但下面的图像应该有所帮助。橙色亮点是边距。

要稍微慢慢移动元素，您可以使用transform:translateX(100px);或任何适合您的值。