使用百分比宽度居中div，但具有最大宽度

Question

我尝试执行以下操作：（JSFiddle在底部）

它应该如何运作：

yellow box应填充剩余空间，即使红框有width: 25%，也不应超过330px。如果黄色框（填充剩余空间）的宽度小于1000px，则蓝色框应完全填充，但如果宽度大于1000px，则蓝色框应为width: 1000px并居中在黄色的盒子里面。

在红色框中我有hide button隐藏左栏，而在蓝色栏中，我有一个按钮，它会带回左栏。隐藏左栏时，它应如下所示：

我遇到的问题：

1. 当分辨率宽度> 1800px（例如）时，红色框（因为它的最大宽度小于25％）并且它没有填满整个容器。 (Screen of the problem in the fiddle)
2. [已修复] 我无法弄清楚如何将bluebox居中，因为它的宽度为100％，但最大宽度为＆＃39 ; t让盒子超过1000px。（Screen of the problem，应居中）

以下是我的问题的JSFIDDLE：JSFIDDLE。  缩小（使用ctrl +鼠标滚轮向下）以查看问题，因为它具有更高的分辨率。

我已经挖掘了这个问题已经有3,5个小时了，而且无法找到问题的答案。

Answer 1

要使元素水平居中，您需要将以下两个CSS属性添加到右中间类：

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

以下是更新后的JsFiddle。