居中一个 900px 宽的元素，左边是橙色，右边是白色

Question

我的 html 页面上有一个元素，我想在屏幕上居中。这很容易。但是：我希望元素左侧的背景为橙色，而右侧的背景应为白色。我正在考虑这样的解决方案：

<div id="outer">
  <div id="middle">
    <div id="inner">
      <p>some content</p>
    </div>
  </div>
</div>

用css：

#outer {
  width: 100%;
  background-color: white;
}
#middle {
  background-color: orange;
}
#inner {
  width: 900px;
}

唯一缺少的是将#inner 置于中心位置。有什么方法可以修改 #middle 或 #inner 的填充或边距以获得所需的结果？

Answer 1

使用这个：

#middle {
  background-color: orange;
  margin: 0 auto;
}