<div class="ui-content" role="main">
    <div class="ui-bar ui-bar-a ui-corner-all">
        <h3>居中标题</h3>
    </div>
    <div class="ui-body ui-body-a ui-corner-all" style="text-align: center;">
        这是居中的内容
    </div>
</div>

<div data-role="page">
    <div data-role="content" style="display: flex; justify-content: center; align-items: center; height: 100vh;">
        <div>垂直和水平居中内容</div>
    </div>
</div>

<div class="ui-grid-solo">
    <div class="ui-block-a" style="text-align: center;">
        居中内容
    </div>
</div>

/* 确保父容器有明确的尺寸 */
.parent-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
    绝对定位居中
</div>

// 动态居中示例
$(document).on("pagecreate", "#myPage", function() {
    var $content = $("#myContent");
    var windowHeight = $(window).height();
    var contentHeight = $content.outerHeight();
    
    $content.css({
        "position": "absolute",
        "top": (windowHeight - contentHeight) / 2 + "px",
        "left": "50%",
        "transform": "translateX(-50%)"
    });
});