使用jquery在bootstrap 3容器中垂直居中答案

【问题标题】：Vertical centering in bootstrap 3 container with jquery使用jquery在bootstrap 3容器中垂直居中
【发布时间】：2014-01-06 23:43:38
【问题描述】：

我有一个页面的标题，它的左侧是一个 div，它位于左侧，并且使用引导程序 3 进行响应。我有一个图像，然后是一些彼此相邻的文本。因为它们是响应式的，所以它们并不总是在包含的 div 中垂直居中。我尝试使用 jquery 将它们居中，如下所示：

var userImg_pos = function() {
    $(".lp-shell-head-user-img").css({
        marginTop: ($(".lp-shell-head-user-img").height() * ".5") * -1
    });
    $(window).resize(function() {
        $(".lp-shell-head-user-img").css({
            marginTop: ($(".lp-shell-head-user-img").height() * ".5") * -1
        });                
    });
}
userImg_pos();

但它似乎不起作用。我做了一个问题来展示它。您可以在左侧看到绿色方块和文本，并且它们都被移到了容器上方的一半，这对我来说没有意义，因为在它们的 css 中它们都有 top:50%。

这是小提琴，任何对此的见解将不胜感激：http://jsfiddle.net/cDz79/1/

【问题讨论】：

github.com/PaulSpr/jQuery-Flex-Vertical-Center

标签： jquery css twitter-bootstrap vertical-alignment

【解决方案1】：

要使用top: 50%（或任何其他位置）定位元素，您必须在CSS 中为该元素本身设置position: absolute;，在CSS 中为父元素设置position: relative;。

#imgparent {
    border:1px solid blue;
    position: relative;
}
.lp-shell-head-user-img {
    position: absolute;
}

http://jsfiddle.net/mblase75/7TXqg/

【讨论】：