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

【问题标题】：Centre child div vertically witout knowing parent height在不知道父高度的情况下垂直居中子 div
【发布时间】：2013-02-01 01:00:10
【问题描述】：

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

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

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

目前我有一个包含图像的外部 div。背景颜色为白色（或其他颜色）的内部 div 定位为 0,0，宽度和高度为 100%。这一切都很好，我已经能够通过简单地使用 text-align: center; 水平居中;

非常感谢！

【问题讨论】：

等等 .. 你是要垂直还是水平居中？
你试试display: table、display: table-cell之类的CSS规则，然后应用CSSvertical-align: center？
垂直。我已经能够很容易地设置水平，但我不知道每个外部 div 的高度以便能够将垂直对齐设置为中间
是的，尝试了显示代码，仍然与外部 div 的顶部对齐。
子 div 是固定高度吗？如果是这样，可以用 CSS 做到这一点

标签： jquery css

【解决方案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 });

【讨论】：

【解决方案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。希望这能有所帮助。

【讨论】：