我如何在不知道父母身高的情况下垂直居中DIV

Question

您好，希望您能帮助我。我试图垂直居中，但我一直失败。我认为问题是Div是一个由2个要素组成的画廊 - 主要图像不可滚动，因为它们适合屏幕 - 缩略图（通过jQuery hide/显示出来并隐藏单击特定图标的主要图像）。我无法将儿童div（画廊）集中，因为我无法将高度设置给父母（页面容器），因为我需要缩略图是可滚动的。但是我希望主要图像以页面为中心...

这是我的HTML代码（我保留了必需）：

<!--page -->
<div id="gallery-container">
<!-- main images -->        
<div class="cycle-slideshow">
<img src="img.jpg">  
</div>
<!-- thumbnails -->
<div class="thumbs">
<img src="img.jpg">
</div>
<!-- jquery hide/show code -->
<script type="text/javascript">
$('.thumbsicon').on('click', function() {
$('.cycle-slideshow').hide(); $('.thumbs').fadeIn();
});
$('.thumbs li img').on('click', function() {
var imgSrc = $(this).attr('src');   
$('.cycle-slideshow').fadeIn('slow').css('background-image', 'url( + imgSrc + )');
$('.thumbs').hide(); 
});
</script>
</div>

和CSS（考虑我的网站在左侧有250px的侧边栏菜单）：

#gallery-container{width:700px;z-index:70;margin:0   auto;position:relative;overflow:hidden;padding:0 20px 0 270px;}
.cycle-slideshow {width:700px;height:517px;margin:0 auto;padding:0;position:relative;}
.thumbs {position:relative; width:700px; margin:0 auto; padding:0; display:none;}

我尝试了许多CSS解决方案，但似乎没有任何解决方案。我能做些什么？预先感谢...

Answer 1

这是一个stackoveflow，我回到了我自己的目的。这是我必须将其定位到窗口或父元素：

使用jQuery将DIV置于屏幕上

演示：http：//jsfiddle.net/6p7am/1/

jQuery.fn.center = function (centerToWindow) {
    var parent = null;
    var positionCss = null;
    if (centerToWindow) {
        parent = window;
        positionCss = "absolute";
    } else {
        parent = this.parent();
        positionCss = "relative";
    }
    this.css({
        "position": positionCss,
            "top": Math.max(0, (($(parent).height() - this.outerHeight()) / 2) + $(parent).scrollTop()) + "px",
            "left": ((($(parent).width() - this.outerWidth()) / 2) + $(parent).scrollLeft() + "px")
    });
    return this;
}
$(function () {
    $(window).resize(function () {
        $("#gallery-container").center(true);
    }).trigger("resize");
});

Answer 2

在父母上包含要中心的元素，设置这些CSS属性。

显示：table-cell;垂直主体：中间;

Answer 3

您应该在这篇文章中找到想要的东西：http：//css-tricks.com/centering-in-the-the-unknown/

Answer 4

如果您不知道父母的身高，则可以在

中获得jQuery

var parentHeight = $('#gallery-container').height();

然后，您可以在整个代码中使用parentHeight来帮助您这样的集中：

var parentHeight = $('#gallery-container').height();
$('#gallery-container').css('margin-top', '-' + (parentHeight + 'px');

当然，您必须在CSS中使用此功能：

#gallery-container {
    position: absolute;
    top: 50%;
}

当然，请确保您在$(document).ready();上调用此中心代码，还可以在$(window).resize();