如何在两个div之间垂直居中div？ jQuery？

Question

我会说我很擅长 HTML 和 CSS，当我开始接触 JavaScript 时，我感到很挣扎；我可以理解其中一些，但我无法为我的生活写下它！我正在努力学习，无论如何；我已经将这个 jQuery 脚本与目标放在一个 div 垂直居中在相对定位的顶部 div 和绝对定位的底部 div 之间。这对我来说行不通，哈哈。

因为我正在尝试学习如何使用 jQuery 并创建自己的脚本，所以我想尝试让它工作。但是，如果有更好的方法来实现我的目标，我也将非常感谢您以这种方式提供的意见！

<script type="text/javascript">
$(document).ready(function() {
$(window).ready(function(){
vertical_height()
});
$(window).resize(function(){
vertical_height()
});
function vertical_height(){
var doc_height = $(document).height();
var head_height = $(".headcontent").height();
var mid_height = $(".midcontent").height();
var foot_height = $(".footer").height();
var pos_height = Math.round(head_height+foot_height);
var neg_height = Math.round((head_height-foot_height)/2);
var fin_height = Math.round(doc_height-(pos_height-neg_height));
$('.midcontent').css({
"marginTop","-"+fin_height+"px",
"marginBottom","-"+fin_height+"px"
}
}
});
</script>

.headcontent 是顶部 div。

.midcontent 是我想要居中的中间 div。

.footer 是底部 div。

Answer 1

这是你的代码，整理成可以运行的东西：

$(function() {
    function vertical_height() {
        var doc_height = $(document).height();
        var head_height = $(".headcontent").height();
        //var mid_height = $(".midcontent").height();//not used
        var foot_height = $(".footer").height();
        var pos_height = head_height + foot_height;
        var neg_height = (head_height - foot_height) / 2;
        var fin_height = doc_height - (pos_height - neg_height);
        $('.midcontent').css({
            "marginTop": "-" + fin_height + "px",
            "marginBottom": "-" + fin_height + "px"
        });
    }
    $(window).resize(vertical_height).trigger('resize');
});

现在您可以专注于让算法正确。

就目前而言，组合和简化表达式，我得到：

var fin_height = doc_height - head_height*3/2 - foot_height*3/2;

这对我来说看起来不对，但我可能是错的。

编辑

为了避免重叠，试试这个版本：

var $$ = {}; //jQuery object cache.
$$.w = $(window);
$$.h = $(".headcontent");
$$.m = $(".midcontent");
$$.f = $(".footer");
function vertical_height() {
    var w = $$.w.height(),
        h = $$.h.outerHeight(true),
        m = $$.m.outerHeight(),
        f = $$.f.outerHeight(true),
        fin_height = Math.max(0, (w - h - m - f) / 2);
    $$.m.css('marginTop', Math.floor(fin_height)).css('marginBottom', Math.ceil(fin_height));
    $$.h.text(fin_height);
};
$(window).on('resize', vertical_height).trigger('resize');

DEMO

注意事项

• position:absolute 从页脚的 CSS 中移除
• jQuery 对象现在缓存在 $$ 中，以减少调整大小处理程序的工作量。
• 现在基于窗口高度而非文档高度进行计算。
• 现在使用.outerHeight(false) 测量三个 div，包括垂直填充和边框。
• Math.max(0, ...) 可防止重叠，从而确保鳍片高度不会为负值。
• $$.h.text(fin_height); 语句用于调试，可以删除。

编辑 2

以下代码将“消除”调整大小事件。

替换：

$(window).on('resize', vertical_height).trigger('resize');

与：

var do_resize;
$(window).on('resize', function(){
  clearTimeout(do_resize);
  do_resize = setTimeout(vertical_height, 100);
}).trigger('resize');

Answer 2

计算时只是一个小提示，在得到最终数字之前不要四舍五入。

h = Header Height

f = Footer Height

m = Middle Height

d = Document Height

s = Height of the space above or below the div

这里我们假设文档的高度等于所有其他元素组合的高度。由于中间 div 的上方和下方有一个相等的空格，因此我们有两个空格。

d = h + f + m + 2s

d - h - m -f = 2s

(d - h - m - f) / 2 = s

让我们把它放到一些javascript中

$(document).ready(function() {

    $(window).resize(vertical_height());

function vertical_height() {
    var doc_height = $(document).height();
    var head_height = $(".headcontent").height();
    var mid_height = $(".midcontent").height();
    var foot_height = $(".footer").height();
    var fin_height = Math.round((doc_height - head_height - mid_height - foot_height) / 2);
    $('.midcontent').css("margin-top", fin_height)
  }
});

对于 css，我们只需要添加一个上边距，因为这会将其推离页眉，因为我假设绝对定位的页脚将卡在底部。

这是一个有效的小提琴：http://jsfiddle.net/nBUnt/14/