jquery移动内容垂直居中答案

【问题标题】：jquery mobile content vertically centeredjquery移动内容垂直居中
【发布时间】：2013-01-17 11:31:48
【问题描述】：

我有几个页面 (data-role="page")，每个页面都有一个内容 div (data-role="content")。我只是想垂直集中每个页面上的内容 div。我试过垂直对齐，它没有用。我尝试获取浏览器高度并分配顶部，如下所示：

home_height = $("#home_page_content").height();
            contentTop = (browserHeight - headHeight - home_height)/2;
            $("div:jqmData(role='content')").css("position", "relative").css("top", contentTop);

但它不适用于除主页之外的其他页面。因为 height() 对不可见元素不起作用，所以内容高度将始终为 0。

然后我尝试了一种 css hacking 的方式来获取类似这样的其他内容：

$("#lounge-content").css({
                position:   'absolute',
                visibility: 'hidden',
                display:    'block'
            });
            lounge_height = $("#lounge-content").height();
            $("#lounge-content").css({
                position:   'static', // Again optional if #myDiv is already absolute
                visibility: 'visible'
            });
            loungeTop = (browserHeight - headHeight - lounge_height)/2;
            console.log("lounge height is: " + lounge_height + ", lounge top value now is: " + loungeTop);
            $("#lounge-content").css("position", "relative").css("top", loungeTop);

问题是当我打开文件时，我只能看到标题，内容被隐藏，我必须刷新浏览器才能看到所有内容。它工作得很好。

但这显然不是一个非常方便的方法。也许垂直集中的 div 不应该那么困难？有人可以帮帮我吗。非常感谢！

【问题讨论】：

标签： javascript jquery html css jquery-mobile

【解决方案1】：

由于 jQM，找到正确的内容大小可能会很棘手，没有它，您将无法将其垂直居中。

data-role="content" div 高度只能在 pageshow 页面事件中检索。每个其他实例都会为您提供内容高度 0。

我给你做了一个有效的例子：http://jsfiddle.net/Gajotres/JmqX6/

$('#index').live('pageshow',function(e,data){    
    $('#index-content').css('margin-top',($(window).height() - $('[data-role=header]').height() - $('[data-role=footer]').height() - $('#index-content').outerHeight())/2);
});

如果您在 jQM 中实现此功能需要帮助，请与我联系。

编辑 (23.02.2015)

更新的 jsFiddle 示例：http://jsfiddle.net/udvhs0Lb/

live() 在 jQuery 中不再可用（我认为是从 jQuery 1.8.3 开始），所以页面甚至绑定应该如下所示：
```
  $(document).on('pageshow','#index', function(e,data){  
```

【讨论】：

当您只有一个页面，但是当您导航到其他页面时，（应用到所有页面时使用适当的选择器）并且页面显示，但页面摆动时，此方法有效。看起来很糟糕。

【解决方案2】：

以下适用于多个 jQM 页面和多个隐藏/显示的页眉和页脚：

applyVerticalCentering = function() {
    $(this).on('pagebeforeshow',function(e,data){
        $('[data-vertical-centred]').hide();
    });

    $(this).on('pageshow resize',function(e,data){    
        $('[data-vertical-centred]').each(function(index){
            var _this = $(this);
            _this.css('margin-top',
                      ($(window).height() -
                       $('header:visible').height() -
                       $('footer:visible').height() -
                       _this.outerHeight())/2);
            _this.show();
        });
    });
}();

然后在 html 中使用声明式样式：

<div data-role="content" data-vertical-centred>
    hi there in the middle!
    <a href="#page1" data-role="button">clicky</a>
</div>

示例：http://jsfiddle.net/hungrycamel/82KX6/

【讨论】：

这是一个很棒的代码，如果你能帮助我，我还想添加垂直和水平中心

【解决方案3】：

感谢您的回答。对我来说，触发器不起作用，似乎是由于较新的 jquery 版本

$('#index').live('pageshow',function(e,data){    
$('#index-content').css('margin-top',($(window).height() - $('[data-role=header]').height() - $('[data-role=footer]').height() - $('#index-content').outerHeight())/2);
});

因此，下面是适用于我的修改后的代码（仅更改了触发器）

$(document).on('pageshow', '#index', function(event) {
$('#index-content').css('margin-top',($(window).height() - $('[data-role=header]').height() - $('[data-role=footer]').height() - $('#index-content').outerHeight())/2);
});

【讨论】：

【解决方案4】：

必须上课才能做到这一点。一种用于垂直居中，一种用于垂直和水平：

.h-centered-item {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%)
}

.vh-centered-item {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}

只需将其应用于要垂直居中或两者都居中的元素

【讨论】：