html - 如何以固定的边距将元素居中？

我试图将元素的边距设置为自动值（我想使其居中）并加上一定数量的像素，但是calc(auto + 20px)似乎不起作用。这是我的代码：

#game {
    border: 5px groove orange;
    padding-left: 0px;
    padding-right: 0px;
    width: 400px;
    height: 400px;
    margin-left: calc(auto + 20px);
    margin-right: calc(auto + 20px);
    display: block;
}

有没有其他替代方法？

最佳答案

您可以通过添加其他容器来实现。

.container {
  text-align: center;
  background: pink;
}

.inner {
  display: inline-block;
  margin-left: 20px;
  margin-right: 20px;
  background: aqua;
}

<div class="container">
  |<div class="inner">Hello world</div>|
</div>

关于html - 如何以固定的边距将元素居中？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42675350/