jquery fancybox内容不以Chrome为中心

我认为这是一个css问题，但我没有做任何事使得Chrome将fancybox的内容放在中心位置。 不是屏幕的中心; 显示框的中心。

它是#fancybox-wrap的一部分吗？

#fancybox-wrap { position: absolute; margin: 20 0 0 20; padding: 20px; z-index: 1101; outline: none; display: none; } 

我已经尝试了一百万件事，但只有Chrome不会将内容（图像）向下推到右边。

好的 – 这里有一些可能相关的css：

 #fancybox-overlay { position: absolute; top: 0; left: 0; width: 100%; z-index: 1100; display: none; } #fancybox-tmp { padding: 0; margin: 0; border: 0; overflow: auto; display: none; } #fancybox-wrap { position: absolute; margin: 20 0 0 20; padding: 20px; z-index: 1101; outline: none; display: none; } #fancybox-outer { position: relative; width: 100%; height: 100%; background: #000; } #fancybox-content { width: 0; height: 0; padding: 0; outline: none; position: relative; overflow: hidden; z-index: 1102; border: 0px solid #000; } 

我使用的HTML是：

Answer 1

将您的花式框type选项切换为image ，您应该没问题。 这是一个JSFiddle更新，其修复程序在Chrome中看起来不错： http ： //jsfiddle.net/PY2dU/5/

相关代码：

 $("#special").fancybox({ 'title' : 'SPECIAL OFFERS', 'width' : 630, 'height' : 465, 'autoScale' : true, 'autoDimensions' : true, 'transitionIn' : 'elastic', 'transitionOut' : 'elastic', 'speedIn' : 200, 'speedOut' : 200, 'overlayShow' : true, 'centerOnScroll' : true, 'easingIn' : 'easeOutBack', 'easingOut' : 'easeInBack', 'type' : 'image' }); 

Answer 2

对于任何使用带有div容器的fancybox而不是指向另一个页面的链接的人来说，对我来说有用的是将text-align: center样式添加到容器中。 这集中了fancybox的内容。

 Show Lightbox Now 
   

和JS一起启动它。

 $("#lightbox-link").fancybox({ 'onStart': function() {$("#container").css("display","block");}, 'onClosed': function() {$("#container").css("display","none"); }, });