Question

我已经尝试了几个小时来垂直和水平居中一个没有特定宽度或高度的div在父div中有一个max-width和max-height但会有响应。我已经查看了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>

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

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

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

2 个答案: