不知道CSS高度的垂直对齐？

我通常会使用绝对定位和顶部有一个负的margin-top（孩子的身高的一半）设置为50％，垂直居中。在这种情况下，这将不起作用，因为子元素的高度会有所不同。不知道CSS高度的垂直对齐？

那么，有没有办法垂直居中一个div内一个div不知道孩子的身高？

来源

2010-11-09 mike

+12

我相信是这样被定制为特定的程序员与谷歌不同纯CSS的解决方案:) – Sarfraz 2010-11-09 17:49:58

看看这个答案在SO：HTTP：//计算器。 - 是知名的CSS-垂直对齐-DIV-时，无固定大小的最-DIV COM /问题/ 7206640/ – 2013-01-09 17:39:38

使用填充顶，填充底部垂直居中元素，带有或不带有高度定义...

来源

2010-11-09 20:02:30 Conex

我不认为将填充工作，如果的元素的高度变化，唯一的CSS解决方案是使用table-cell，或者你可以使用javascript – Tom 2011-10-20 16:59:55

Tim：请阅读这个问题，他寻找div解决方案。 – Conex 2011-10-31 20:27:50

使用display：table-cell解决方案仍然使用div，请参阅http://blog.themeforest.net/tutorials/vertical-centering-with-css/ – Tom 2011-11-01 12:38:08

可以使元件显示：表细胞，并把垂直对齐：中心。我通常不推荐使用显示：表 - 但是这是最简单的解决方案，我认为

来源

2010-11-09 17:52:25 marioBonales

您还可以使用JavaScript与JS库如jQuery抢孩子的身高很轻松地动态，甚至更容易。

根据您的个人资料，你也有一些熟悉的jQuery，所以我建议这条路线。如果您需要该解决方案的帮助，请告诉我。

来源

2010-11-09 18:41:48

以下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/

UPDATE：

的浏览器支持CSS变换（IE9 +）http://caniuse.com/#search=transform

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

来源

2011-10-20 17:28:51 Tom

不知道CSS高度的垂直对齐？

回答

相关问题