在响应式设计中，将“top”和“bottom”的边距设置为“right”和“left”的边距
我有一个容器div，它有动态宽度，它会根据屏幕分辨率而变化。 在这个div里面我有另一个固定高度和宽度的元素。 我可以给这样的元素一个margin: 0 auto; 并在中间水平对齐，但是这个技巧不能在中间垂直对齐，因为容器div的高度保持不变（它不是固定的高度，它取决于div内的内容）。 因此，当用户更改分辨率时，我想以某种方式应用相同的边距，如左右，上下。 因此，各方应该有相同的动态保证金？
拥有基于CSS的解决方案会很好，但如果不可能，jQuery也是好的。
基本上我需要的是计算右侧或左侧的边距并将这些值应用于顶部和底部边距。
我认为你不需要JavaScipt / jQuery解决方案。 你可以用CSS做到这一点。
查看vertical-align属性。 您需要查看其警告和要求，因为它要求元素为inline / inline-block 。
你想要的是：
#centered-element { display: inline-block; height: 300px; //your fixed height width: 250px; // your fixed width margin-left: auto; margin-right: auto; vertical-align: middle; }
看看这篇文章 。 它给出了vertical-align属性，其用途和局限性的非常好的描述。
UPDATE
根据您的评论，如果您希望（字面上）应用左边距或右边距也是上边距，您可以使用以下jQuery执行此操作：
$(document).ready(function() { var $ele = $("#centered-element"); var marginL = $ele.css("margin-left"); $ele.css({ "margin-top": marginL, "margin-bottom": marginL }); });
如果你有固定的内部元素的宽度和高度，你可以使用这个小技巧
#outside { position: relative; } #inside { position: absolute; top: 50%; left: 50%; height: 500px; width: 500px; margin-top: -250px; margin-left: -250px; }
这使得容器div以恒定的余量浮动。
Content div { background: #282; width:90%; height:90%; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; }
http://jsfiddle.net/djwave28/tATZU/1/
另外，在引用内容时，您可以将其放在容器中。 超过高度时，可以应用CSS中的滚动function。 如果不是，窗口的滚动function将接管。