如何使用jQuery对视图中的对象进行水平居中？

Question

我知道这是以前问过的但我的情况有点..。真奇怪。我正在构建一个iframe以后使用在幻灯片元素在网站上。

我有一个长的内容自适应柔性盒，它远远超出了屏幕的范围，我想使用css技巧

left:50%;
transform:translateX(-50%);

要将当前查看的页面区域水平居中，因此当您调整窗口大小时，当前查看的元素的中间仍将保持在屏幕的中间。

由于我的柔性盒是内容自适应的，它就像5KPX长，所以我显然不能使用css %。因此，我使用jQuery并使用$(window).width()来确定当前的视口大小，并使用.css({})方法调整元素。以下是jQuery代码：

$(document).ready(function(){
$(window).resize(function(){
var winWidthHalf = ($(window).width())/2;
$("#ss_home").css({
"left":"-"+winWidthHalf+"px",
"-webkit-transform":"translateX("+winWidthHalf+"px)"
});
});
});

谜题是:它起作用了。然后我重新启动了个人电脑，从那以后，它就无法工作了。不管我做了什么似乎都帮不上忙。你能帮上忙吗？我不知道会发生什么..。这是页面预览，请不要介意代码中的其他注释，它们现在是不相关的：http://users.metropolia.fi/~staniss/test/slideshow/

所有的内容都只是样本。

我还想知道如何正确地分组$(document).ready和$(window).resize，因为我执行相同的代码，但不想复制它两次，只是为了更改事件，因为这是一个糟糕的做法。我还没有找到正确的语法。

另外，很抱歉，该示例仅用于chrome，它在dev中非常早期，所以我还没有考虑兼容性问题。

Answer 1

这是一个浏览器供应商扩展问题(必须添加-webkit-前缀来转换)：