jQuery Mobile 独自の機能のため、純粋な CSS を使用してコンテンツを完全にセンタリングすることはできません。
jQM専用に作成された実際の例を次に示します: http://jsfiddle.net/Gajotres/detPg/
$(document).on('pageshow', '#index', function(){
$("div[data-role='fieldcontain']").css('margin-top',getRealContentHeight()/2 - $('#b').height()/2);
$('#b').css('margin-left',$("div[data-role='content']").outerWidth()/2 - $('#b').width()/2);
});
function getRealContentHeight() {
var header = $("div[data-role='header']:visible");
var footer = $("div[data-role='footer']:visible");
var content = $("div[data-role='content']:visible:visible");
var viewport_height = $(window).height();
var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
content_height -= (content.outerHeight() - content.height());
}
return content_height;
}
通常、水平方向のセンタリングは css でのみ実現できますが、新しい jQM 1.3 の変更により、javascript を介して計算する必要があります。