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

Question

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

如您所见 ，它是视频的缩略图预览。 在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技巧到以百分比形式添加padding以及使用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且具有position：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();