Question

我目前正在使用jQuery中心插件来居中我的div元素，到目前为止它的工作范围是将它集中到包含的父容器。我想要它做的是将它居中到当前的浏览器视口中心。怎么办？

单击时，我的设置是一个简单的链接，一个div会弹出，就像我想要居中到当前浏览器视口中心的模态一样。

Answer 1

无需插件。这就是诀窍：

$('#yourElement').css('display', 'inline-block').wrap('<table style="position:fixed;top:0;left:0;height:100%;width:100%;border-spacing:0;border-collapse:collapse"><tr><td style="vertical-align:middle;text-align:center;padding:0"></td></tr></table>');

现场演示： http://jsfiddle.net/simevidas/EnrLn/1/

同样的事情，但没有TABLE元素。我使用DIV与display:table和display:table-cell代替：

现场演示： http://jsfiddle.net/simevidas/EnrLn/2/

Answer 2

使用

jQuery( "#element_id" ).css( 'top', parseInt( ( jQuery( window ).height() / 2 ) + jQuery( document ).scrollTop() - jQuery( "#element_id" ).height() ) );
jQuery( "#element_id" ).css( 'left', parseInt( ( jQuery( document ).width() / 2 ) + jQuery( document ).scrollLeft() - jQuery( "#element_id" ).width() ) );

使用中心插件的jQuery中心元素到视口

2 个答案: