Question

我需要在".box"内垂直和水平居中一个名为<body></body>的div。它包含一个<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
    });
});

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

编辑： 该框必须动态适应其内容！

Answer 1

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

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

Answer 2

你可以在纯CSS中这样做：

http://jsfiddle.net/pqDQB/716/

HTML：

<div id="content">
    Content goes here
</div>

CSS：

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
#content {
    width: 100px;
    height: 100px;
    background-color: red;
    text-align: center;
    vertical-align: middle;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    left: 50%;
    margin-left: -50px;
}

如果#content没有固定的宽度/高度，您可以使用JavaScript获取这些值，并在margin-left属性中设置正确的margin-top和style值。

Answer 3

作为变体，您可以为div添加outer-div，并在其中居中放置内容。并使用您的JQuery垂直居中外部块。

因此，在这种情况下，您的代码应该是这样的：

HTML：

<div class="box-outer">
    <div class="box">
           Lorem ipsum dolor sit amet.
    </div>
</div>

CSS：

.box-outer {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    text-align: center;
}
.box {
    display: inline-block;
    border: 2px solid #ccc;
    margin: 0 auto;
}

JQuery的：

$(function() {

    var $box = $('.box-outer');
    var boxHeight = $box.outerHeight( true );

    $box.css({
        'margin-top' : -1*( boxHeight/2 )
    });

});

您也可以在小提琴中看到相同的代码：http://jsfiddle.net/shurshilin/0p01dqaL/

我希望它会对你有所帮助。

Answer 4

尝试此功能仅适用于所有浏览器：

中心对齐

#content{
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute; 
    margin:auto;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

Answer 5

这篇文章描述了我找到的最佳解决方案（仅限CSS）。它解释了如何垂直居中，水平放置更容易。

http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Answer 6

http://howtocenterincss.com/ 我发现这个网站非常实用。它指导您决定如何以css为中心。

Answer 7

将css放在一个类中并应用该类。

$('.box').add('my_class');

<强> CSS

.my_class {
    position : absolute,
    left : '50%',
    top : '50%',
}

其他款式 -

$('.box').css('margin-top' : -$('.box').outerHeight()/2):
$('.box').css('margin-left' : -$('.box').outerWidth()/2):

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

7 个答案: