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

Question

我已经尝试了几个小时在具有max-width 和max-height 但会响应的父 div 中垂直和水平居中一个没有特定宽度或高度的 div。我查看了 CSS 和 JS/jQuery 选项，但都没有正常工作。

As you can see，这是视频的缩略图预览。当处于normal 状态时，它只显示缩略图，上面有一个播放图标。在hover 状态下，它将播放按钮更改为橙色，显示标题，并在缩略图上方有一个黑色透明覆盖层。

现在，如果网站没有响应，这将很容易使用 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- -->

这是我的 CSS：

.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%;
    position: absolute;
    text-align: center;
}

.movie-archive .movie:hover .movie-overlay {background: rgba(0, 0, 0, 0.6);}

.movie-archive .movie .movie-play {
    background: url("images/play-icon@2x.png") no-repeat center 0;
    background-size: 94px 190px;
    width: 100%;
    height: 95px;
}

.movie-archive .movie:hover .movie-play {background-position-y: -95px;}

.movie-archive .movie .movie-title {
    font-size: 17px;
    letter-spacing: -0.01em;
    font-weight: 700;
    color: #ffffff;
    display: none;
    padding: 10px 50px 0;
}

.movie-archive #latest-top.movie:hover .movie-title, .movie:hover .movie-title {display: block;}

.movie-archive .movie .movie-thumb img {
    width: 100%;
    height: 100%;
    display: block;
}

我尝试了各种方法，从添加另一个 div 和使用 display: table 技巧到将填充添加为百分比，以及使用 JS。似乎没有任何效果。有没有人有什么建议？我真的很感激。谢谢！

这并不重要，但我在这个网站上使用 WordPress。

Answer 1

你想要居中的容器和元素应该有这样的属性：

.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
}

来源：http://designshack.net/articles/css/how-to-center-anything-with-css/

Answer 2

试试这个：

$(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（具有max-width和max-height且位置为：relative的那个。它应该可以工作。

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

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

</div>

您必须使用包含 jQuery 才能使用它。 :)

注意 -------- 我编写的代码根据窗口的大小而不是父级的 div 大小工作。 如果您想适应您的情况，请更改 vars w、h、k、z 的值，使其值与父级的 div 大小而不是窗口大小相关。例如w = $('#outdiv').width() 而不是w = $(window).width();