多个堆叠的Div具有水平和垂直居中

Question

我已经找了几个小时来讨论如何做到这一点，并尝试了许多实验，这些实验让我得到了一些，但并不是我在目标网页上需要的所有功能。一旦我得到最后一块拼图，它似乎打破了我已经工作的其他部分。所以我似乎可以解决问题，但是当我尝试组合这些碎片时我失败了。也许他们之间的冲突无法解决？我很确定这是可以实现的。

让我试着解释一下我要做的事情：

我需要两个div在我的目标网页上并排放置，当它以宽格式（宽度超过320像素）时，但我希望这两个div在网络上叠加在一起页面不宽（＆lt; 320px）。这很容易通过使用：style =＆＃34; display：inline-block; float：left;＆＃34;在每个div上，这两个表现得像我想要的那样。但是，当我尝试其他所需的功能时，这会崩溃，例如：

1. 左侧div的内容（由于浏览器窗口缩小而在堆叠时也是顶部div）需要在宽度范围内的左侧div中水平和垂直居中（＆gt; ; 320px）和窄（<320px）页面格式。
2. 右边div的内容将固定为320px宽和420px高两种页面格式，因为我使用facebook插件发布状态更新。
3. 左侧div大小应根据浏览器窗口大小动态缩放，如下所示：
4. 当页面宽度> 320px，我希望左div与右div（420px）的高度相同，这样左div中的内容将相对于右div的内容垂直居中。
5. 当页面宽度<＆lt; 320px，我希望左边的div（现在堆叠在顶部）只有50px高，而右边的div（现在堆叠在底部）保持固定在420px高。
6. 无论左侧div的宽度或高度如何，左侧div的内容应始终水平放置并垂直居中于该div内。

可以用纯.css来完成，还是需要javascript hack？

希望我已经解释得很好，有人可以帮助我 - 我将非常感激，并允许我继续编写页面的其余部分。

由于