使用jQuery动态地将div垂直和水平居中

Question

使用jQuery动态地将div垂直和水平居中

Max*_*rie 2 html javascript css jquery css3

我需要垂直和水平居中一个叫".box"内部的div <body></body>.它包含一个<h1>,就是这样.在将来,它可能会包含一个内容<img>.

我尝试了很多技巧,但不幸的是它效果不好......

所以我在这个主题上找到了:使用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
    });
});

Run Code Online (Sandbox Code Playgroud)

我真的不知道这个问题出在哪里.

编辑: 框必须动态适应其内容!

Answer 1

Tus*_*har 7

这将动态计算并定位.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
    });
}

Run Code Online (Sandbox Code Playgroud)

演示:https://jsfiddle.net/tusharj/a5Lpeoux/1/

归档时间：	10 年，4 月前
查看次数：	8070 次
最近记录：	10 年，4 月前