如何在不知道父高度的情况下垂直居中 div？答案

【问题标题】：How can I vertically center a div without knowing the parent height?如何在不知道父高度的情况下垂直居中 div？
【发布时间】：2026-02-07 06:15:01
【问题描述】：

您好，希望您能帮到我。我正在尝试将 div 垂直居中，但我一直失败。我认为问题在于 div 是一个由 2 个元素组成的画廊 - 因为适合屏幕而无法滚动的主要图像 - 缩略图（通过 jquery 显示隐藏/显示和隐藏主要图像单击特定图标）。我无法将子 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 解决方案，但似乎都没有奏效。我能做些什么？提前谢谢...

【问题讨论】：

标签： jquery css responsive-design center absolute

【解决方案1】：

这是我不久前出于自己的目的改编了已接受答案的代码的 stackoveflow。这是我必须定位到窗口或父元素的内容：

Using jQuery to center a DIV on the screen

演示：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");
});

【讨论】：

谢谢你，我会试试这个，让你知道！
效果很好！我不知道为什么我没有考虑使用 jQuery，非常感谢 :-)

【解决方案2】：

在包含您想要居中的元素的父级上，设置这些 CSS 属性。

显示：表格单元格；垂直对齐：中间；

【讨论】：

谢谢，但我已经尝试过了，很遗憾没有用
尝试应用相对于父容器的位置，并将绝对位置应用到您需要居中的位置。然后对于居中的元素，应用这些 CSS 属性： position:absolute;top:50%;

【解决方案3】：

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

【讨论】：

【解决方案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(); 上调用

【讨论】：

谢谢你，我会试试这个，让你知道！