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

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() ) );