Question

我想知道如何在不知道父div高度的情况下如何在父div中垂直居中子div？

我有一个pinterest样式画廊页面（图像），并在悬停时我在图像的顶部显示一个div与图像的信息。知道因为每个图像可能有不同的高度，我不知道如何将子内容居中到父div的中间。

我正在使用jQuery Masonary插件来创建布局。

目前我有一个包含图像的外部div。背景颜色为白色（或其他）的内部div位于0,0，宽度和高度为100％。这一切都很有效，我只需使用text-align：center;

就可以水平居中

非常感谢！

Answer 1

这应该可以将它设置为双向居中。还没测试：

var ParentW = $("parent-id").width();
var ParentH = $("parent-id").height();
var ChildW = $("child-id").width();
var ChildH = $("child-id").height();
var PosW = (ParentW - ChildW)/2;
var PosH = (ParentH - ChildH)/3;
$("child-id").css({"top":PosH, "left": PosW });

Answer 2

如果您需要CSS解决方案，我认为这可能适合您。

例如，如果你有这样的布局：

<div class="container">
    <div class="parent">
        <div class="child">
            Lorem ipsum....
        </div>
   </div>
</div>

使用此CSS，您应该能够在.child容器内水平和垂直居中.parent块：

.parent {
    /* change values to adjust the top and bottom space used to vertically center */
    padding-top: 33%;
    padding-bottom: 33%;
}

.child {
    width: 50%; /* the width is not mandatory, of course */
    margin: auto;
    overflow: hidden;
}

您可以对其进行测试here。希望这可以有所帮助。

中心子div垂直而不知道父高

2 个答案: