我需要将一个名为 ".box" 的 div 垂直和水平居中里面<body></body> .它包含一个 <h1> ， 就这样。将来，它可能包含一个<img>。 .
我尝试了很多技巧来做到这一点，但不幸的是它并不奏效......
所以我发现了这个话题:Centering a div vertically & horizontally using jQuery jQuery 的解决方案。但它并不完美，因为 div 停留在屏幕的左侧，如您所见:http://www.arcadmedia.com/
所以我正在寻找解决方案(在 jQuery 或 CSS 中，但对我来说没有任何效果)。
我认为这样的解决方案:http://jsfiddle.net/pqDQB/都不是最好的，jQ 可以做得更好。
我只是在使用这段代码:
$(function() {
$('.box').css({
'position' : 'absolute',
'left' : '50%',
'top' : '50%',
'margin-left' : -$('.box').outerWidth()/2,
'margin-top' : -$('.box').outerHeight()/2
});
});
真不知道是哪里出了问题。
编辑: 该框必须动态适应其内容!
最佳答案
这将动态计算并将 .box 定位在屏幕的中心。您还可以在 resize 和 rotate 事件上调用此函数。
$(updateBoxDimension);
$(window).on('resize', updateBoxDimension);
function updateBoxDimension() {
var $box = $('.box');
// To center the box
var boxLeft = ($(window).width()) / 2 - ($box.width() / 2),
boxTop = ($(window).height()) / 2 - ($box.height() / 2);
$box.css({
left: boxLeft,
top: boxTop
});
}
关于javascript - 使用 jQuery 动态地垂直和水平居中 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30167895/