Javascript 在响应div中居中div的最佳方式

我已经尝试了几个小时，将一个没有特定宽度或高度的div垂直和水平居中放置在一个父div中，该父div具有

max width

和

max height

，但会响应。我已经研究了CSS和JS/jQuery选项，但都没有正常工作

，这是视频的缩略图预览。当处于

normal

状态时，它只显示缩略图，上面有一个播放图标。在

悬停

状态下，它将“播放”按钮更改为橙色按钮，显示标题，并在缩略图上方有一个黑色透明覆盖层

现在，如果网站没有响应，这将很容易用CSS实现。但是，随着浏览器宽度的减小，缩略图的大小也会减小

以下是我正在使用的HTML：

<article class="movie"><a href="#">

    <div class="movie-overlay">

        <div class="movie-play"></div>

        <h2 class="movie-title">Title Goes Here</h2>

    </div> <!-- end .movie-overlay -->

    <div class="movie-thumb"><img src="thumbs/thumb.jpg"/></div>

</a></article> <!-- end #post- -->

从添加另一个div到使用

display:table

技巧，再到以百分比的形式添加填充，再到使用JS，我尝试了各种方法。似乎什么都不管用。有人有什么建议吗？我会非常感激的。谢谢

---

这并不重要，但我正在使用WordPress来创建此站点。

容器和您希望居中的元素应该具有如下属性：

.movie-archive .movie {
    width: 50%;
    height: auto;
    max-width: 480px;
    position: relative;
    overflow: hidden;
    float: left;
}

.movie-archive .movie .movie-overlay {
    width: 100%;
    height: 100%;
    left: 50%;
    margin-left: -50%; //half of width
    top: 50%;
    margin-top: -50%; //half of height
    position: absolute;
    text-align: center; //only if you want the text to be centered
}

来源：

试试这个：

$(document).ready(function() {w = $(window).width();
h = $(window).height();
jQuery.each($('.centerony'), function(i, val) {
lung = $(val).css('height');
a = (h * 0.5) - ((parseInt(lung)) * 0.5);
$(val).css('position', 'absolute');
$(val).css('top', a + 'px')
});
jQuery.each($('.centeronx'), function(i, val) {
larg = $(val).css('width');
a = (w * 0.5) - ((parseInt(larg)) * 0.5);
$(val).css('position', 'absolute');
$(val).css('left', a + 'px')
});

$(window).resize(function() {
k = $(window).width();
z = $(window).height();
jQuery.each($('.centeronx'), function(i, val) {
larg = $(val).css('width'); 
a = (k * 0.5) - ((parseInt(larg)) * 0.5);
$(val).css('left', a + 'px')
})
jQuery.each($('.centerony'), function(i, val) {
lung = $(val).css('height');
a = (z * 0.5) - ((parseInt(lung)) * 0.5);
$(val).css('position', 'absolute');
$(val).css('top', a + 'px')
});
});
});

添加到要居中的元素类“centerony”和类“centeronx”，并设置父级的div（具有最大宽度和最大高度且位置为：relative的div）。它应该可以工作

<div id="outdiv" class="outside" style="position:relative">

<div class="in_div centerony centeronx">I am centered!</div>

</div>

我居中！

您必须使用include jQuery才能使用它。：）

注意------- 我编写的代码根据窗口的大小工作，而不是父级的div大小。

---

如果要适应您的情况，请更改变量w、h、k、z的值，使其值与父级的div大小而不是窗口大小相关。例如

w=$（'#outdiv'）.width（）

而不是

w=$（window.width（）
这可能会有所帮助：这可能会引起兴趣：@HashemQolami感谢您的文章。不幸的是，我不能让它工作。@whymarh问题是我不知道div的宽度/高度。当我用你的代码替换我的代码时会发生什么。知道为什么吗？对不起，愚蠢的打字错误。利润率应该是
-50%
，这也不起作用。注意，我暂时禁用了
overflow:hidden
，以便您可以看到它的功能。当我将代码编辑到
top:89%
时，它似乎可以工作。知道为什么吗？我不知道为什么会这样。但现在你似乎把重心放错了。您应该尝试将播放按钮居中放置在覆盖层中，而不是将覆盖层放置在电影上。在我链接的文章中搜索“With fluid width”，您可能会自己找到它，因为某种原因，
top
和
left
的值太大了。谢谢你换了w，h，k，z变量了吗@康诺诺，即使你写了“注意”我也没有。哎呀！：）我刚把它从
窗口
改成
'.movie'
，运气不好。你知道为什么吗？如果你改变了w，h，k，z，并且你把你父母的div位置设置为relative，它应该可以工作。尝试使用id而不是类获取父级的div，因为如果您多次使用此类，则可能会出现问题。它必须是类，因为元素出现多次。
<div id="outdiv" class="outside" style="position:relative">

<div class="in_div centerony centeronx">I am centered!</div>

</div>