在CSS中不知道高度的情况下垂直对齐？

Question

我通常会使用绝对定位并将顶部设置为 50%，并使用负边距顶部（孩子身高的一半）来垂直居中。在这种情况下，这将不起作用，因为子元素的高度会有所不同。

那么有没有一种方法可以在不知道孩子身高的情况下使div在div内垂直居中？

Answer 1

以下 jquery 函数垂直居中，假设您要定位的项目已经是绝对位置且父位置是相对位置

$.fn.vAlign = function () {
    return this.each(function () {
        $(this).css('top', '50%').css('margin-top', -Math.ceil($(this).height() / 2) + "px");
    });
};

查看实际操作 - http://jsfiddle.net/vqbMU/2/

更新：

支持 css 转换 (IE9+) 的浏览器的纯 CSS 解决方案http://caniuse.com/#search=transform

.align-v {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

Answer 2

可以让元素显示：table-cell，并放置vertical-align:center。我通常不建议使用 display: table - 但这是我认为最简单的解决方案

Answer 3

您还可以使用 JavaScript 动态轻松地获取孩子的身高，使用 jQuery 等 JS 库甚至更容易。

根据你的个人资料，你确实对 jQuery 有一定的了解，所以我建议你走这条路。如果您需要该解决方案的帮助，请告诉我。

Answer 4

使用内边距顶部、内边距底部将元素垂直居中，带或不带高度定义...

Answer 5

apetrakow，slick 的开发者之一，回答了这个问题。

https://github.com/kenwheeler/slick/issues/2351

当您禁用浮动和 分配显示：内联块；给他们。

只需添加这个：

.slick-slide {
    display: inline-block;
    vertical-align: middle;
    float:none;
}