Question

我有几个页面（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应该永远不会那么困难？有人可以帮帮我吗。非常感谢你！

Answer 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中实现此功能，请与我联系。

编辑（2015年2月23日）

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

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

Answer 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/

Answer 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);
});

Answer 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%)
}

只需将其应用于要垂直居中或同时居中的元素

jquery移动内容垂直居中

4 个答案:

编辑（2015年2月23日）