我正在使用Lightbox (tutorial),即一个单击即可打开的div容器。
该div容器未显示,位于click元素下方。
现在,我尝试将其垂直居中,但没有成功。
在Stackoverflow上找到了其他一些问题,但是没有人为我工作,like this。
$(window).resize(function(){
$(“。modal-box”)。css({
顶部:(($(window).height()-$(“。modal-box”)。outerHeight()/ 2)+ $(window..scrollTop()+“ px”)
});
});
问题是:在开始时,div几乎超出了底部屏幕,而下面的div超出了顶部屏幕。
无论位置如何,我都会将每个div放在屏幕中间。
最佳答案
正如@Rakesh对这个问题的评论一样,这可以仅使用CSS来完成;看到这个小提琴https://jsfiddle.net/xc2vrghx/1/
您必须使用2 div。
外层完全100%的宽度/高度,绝对定位,显示设置为桌子,对齐方式为居中和居中-像这样:display: table; min-width: 100%; min-height: 100%; position:absolute;
内部div(这是您居中的容器)必须将css显示设置为table-cell,并为此容器指定中心和中间对齐方式:
display: table-cell; vertical-align: middle; text-align: center;
将您想要的任何东西放入其中;小提琴示例在此中间容器中包含其他html,以作为示例。
CSS显示属性的表和表单元格值在这里起着神奇的作用。 http://colintoh.com/blog/display-table-anti-hero是一篇很好理解的文章
关于javascript - jQuery将div居中于页面中间,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/33406096/