jQuery中心元素以使用中心插件的视口 [英] jQuery center element to viewport using center plugin

问题描述

我目前正在使用jQuery中心插件将div元素居中，到目前为止，它可以扩展到将其居中到包含父容器的地方.我要执行的操作是将其居中到当前浏览器视口中心.该怎么办?

I am currently using the jQuery center plugin to center my div element and so far it works to an extend where it does center it to the containing parent container. What I want it to do is to center it to the current browser viewport center. How can that be done?

我的设置是一个简单的链接，当单击时，一个div会像模式一样弹出，我想将其居中放置在当前浏览器视口中心.

My setup is a simple link when clicked, a div will pop up like a modal that I want centered into the current browser viewport center.

推荐答案

不需要插件.这可以解决问题:

No plug-in is needed. This does the trick:

$('#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结合使用:

Same thing, but without the TABLE element. I use DIV's with display:table and display:table-cell instead:

实时演示: http://jsfiddle.net/simevidas/EnrLn /2/

这篇关于jQuery中心元素以使用中心插件的视口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！