javascript - 以百分比宽度居中 div，但以最大宽度居中

Question

我正在尝试执行以下操作:(底部的 JSFiddle)

它应该如何工作:

黄色框 应填满剩余空间，即使红色框有width: 25%，也不应超过330px。如果黄色框(填充剩余空间)的宽度小于 1000px，它应该被蓝色框完全填充，但如果它的宽度大于 1000px，蓝色框应该有 width: 1000px 并在黄色框内居中。

在红色框中，我有一个隐藏左侧栏的隐藏按钮，在蓝色框中，我有一个按钮可以恢复左侧栏。隐藏左侧栏时，它应该如下所示:

我遇到的问题:

1. 当分辨率为宽度>1800px(例如)时，红框(因为它的最大宽度小于 25%)并且不会填满整个容器。 (Screen of the problem in the fiddle)
2. [Fixed] 我不知道如何让 bluebox 居中，因为它的宽度是 100%，但是最大宽度不让框居中超过1000px。( Screen of the problem ，应该居中)

这是我的问题的 JSFIDDLE:JSFIDDLE . 缩小(使用 ctrl + 鼠标滚轮向下)以在更高分辨率下查看问题。

我已经研究这个问题 3.5 个小时了，但找不到问题的答案。

Answer 1

要使元素水平居中，您需要将以下两个 CSS 属性添加到 center-right 类中:

margin-left: auto;
margin-right: auto;

这是更新的 JsFiddle .