Question

我希望在从底部到顶部的位移10％后垂直居中.presentation div。

我的代码在#home-header达到100％的高度时有效，但当我将其更改为75％时，该代码无效......

如何解决它？

var placement = ($('#home-header').outerHeight()-$('.presentation').outerHeight())/2;

$('.presentation').animate({bottom: placement, opacity: 1}, 1700);

#home-header {
    height: 75%;
    width: 100%;
    background: red;
}
.presentation {
    position: absolute;
    max-width: 1100px;
    margin: auto;
    top: 50%;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    text-align: center;
    z-index: 1;
}

Answer 1

如果主页标题的高度不是100％，则需要调整演示文稿的顶部/底部位置。

http://jsfiddle.net/4t9vsym3/17/

#home-header {
    height: 75%;
    width: 100%;
    background: red;
}
.presentation {
    position: absolute;
    max-width: 1100px;
    margin: auto;
    top: 30%;
    bottom: 30%;
    left: 0;
    right: 0;
    opacity: 0;
    text-align: center;
    z-index: 1;
}

Answer 2

尝试var placement = (window.innerHeight - $(".presentation").height()) / 2;

jsfiddle http://jsfiddle.net/4t9vsym3/18/

从底部到顶部移位后垂直居中

2 个答案: