用動畫垂直居中div

我想垂直居中.presentation div，但是有一個動畫。從下到上的10％的位移。用動畫垂直居中div

我需要保留將不同高度值與父母的div .parent放在一起的可能性，例如75％或100％，但我的文本保持垂直居中。

我可以幫忙嗎？

$('.presentation').animate({ 
    top: '40%', 
    opacity: '1' 
}, 1700, function() {});

.parent { 
    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; 
}

來源

2015-10-22 Xroad

在你的代碼中的缺陷是，你嘗試了10％（50％近似文字的頂部的偏差 - 10％= 40％）。相反應該計算這個偏差$('.presentation').outerHeight()/2 看看這個fiddle。

在那裏，我直接把文本 - 它應居中，然後在div下讓它通過($('.parent').outerHeight() - $('.presentation').outerHeight())/2 相當於

$('.parent').outerHeight()/2 - $('.presentation').outerHeight()/2

（我還設置overflow:hidden CSS屬性來.parent）動畫了

編輯：

我使用H 2-top和高度參考..現在它無論中心調整的計算內容

var $par = $('.parent'); 
var $pres = $('.presentation'); 
var initTop = $par.offset().top + $par.height() * 0.9; 

$pres.offset({left: $pres.offset().left , top : initTop}); 
var delta = $pres.find('h2').offset().top - ($par.offset().top + ($par.height() - $pres.find('h2').height())/2); 
$pres.animate({ 
    top: '-=' + delta, 
    opacity: '1' 
}, 1700, function() {});

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

來源

2015-10-22 19:55:15

謝謝你的幫助，但不幸的是，當我添加文本時，文本不會居中：http://jsfiddle.net/Xroad/4t9vsym3/4/ – Xroad

您可以使用CSS變換通過其高度的一半，以抵消文本的位置：

-webkit-transform: translateY(-50%); 
-ms-transform: translateY(-50%); 
transform: translateY(-50%);

如：http://jsfiddle.net/4t9vsym3/6/

PS .parent應該是position:relative在要求.presentation正確定位在其中。

來源

2015-10-22 20:04:26 Moob

你只需要做一些快速的高度計算。

你的元素的頂部位置應該是：

(heightOfParent - heightOfCenteredElement)/2

這裏是一個小提琴：http://jsfiddle.net/urmg48ba/

編輯：小提琴被打破。更新。

來源

2015-10-22 20:04:55

用動畫垂直居中div

回答

相關問題