使用 jQuery 使 div 垂直和水平动态居中答案

【问题标题】：Dynamically center div vertically and horizontally using jQuery使用 jQuery 使 div 垂直和水平动态居中
【发布时间】：2015-07-21 23:17:52
【问题描述】：

我需要在<body></body> 中将一个名为".box" 的div 垂直和水平居中。它包含一个<h1>，仅此而已。未来可能会包含<img>。

我尝试了很多技巧来做到这一点，但不幸的是效果不佳......

所以我在这个话题上找到了：Centering a div vertically & horizontally using jQuery a solution with 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
    });
});

真不知道是哪里出了问题。

编辑： 盒子必须动态适应其内容！

【问题讨论】：

你的 div 有固定的高度和宽度吗？
问题出在你的容器（body）上，添加一个规则 html, body { width:100%;高度：100%；位置：相对； }
如果您的 div 没有固定的宽度/高度，您可以获取屏幕宽度，减去 div 的宽度并将左/右位置设置为该值的一半。身高也是一样。你也可以使用 CSS calc()
好的，我试试！不，我的 div 没有固定的宽度和高度，因为我希望盒子的内容灵活。

标签： javascript jquery html css

【解决方案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/

【讨论】：

你确定这会将 div 拉到中心...我不这么认为.. whrere 因为它会从中心位置开始 div，结果会有所不同
@NileshMahajan 这就是为什么从windowWidth 中减去boxWidth 然后除以2
这个解决方案很有趣，但我希望 div 适合其中的内容。例如展示桌。如果我删除 css 中的宽度和高度，我会占用所有屏幕宽度。此外，如果我调整窗口大小，div 不会改变。
@RoyLaPoutre 对于resize，您必须在窗口上添加事件并调用相同的函数
@RoyLaPoutre display: table 在您的网站上工作，您只需删除.box 元素的margin-left 和margin-top。这导致盒子进入角落

【解决方案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 来获取这些值并在style 属性中设置正确的margin-left 和margin-top 值。

【讨论】：

【解决方案3】：

作为一种变体，您可以为您的 div 添加外部 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 )
    });

});

您还可以在 fiddle 中看到相同的代码：http://jsfiddle.net/shurshilin/0p01dqaL/

希望对你有帮助。

【讨论】：

这似乎正是我要找的！我会尽快尝试并给您反馈！

【解决方案4】：

试试这个在所有浏览器中都可以使用：

居中对齐

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

http://howtocenterincss.com/ 我发现这个网站真的很有用。它指导您决定如何在 css 中居中。

【讨论】：

【解决方案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):

【讨论】：