如何正确居中文本？

Question

我正在尝试将文本垂直和水平居中放置在 JQM 页面的中间。使用 1.4.5，默认主题。

在我的 .css 我有：

.splashDiv {
    position: absolute;
    top: 50%;
    height: 50%;
    width: 100%;
    text-align: center;
    padding:0;
}

HTML

<div class="splashDiv" data-role="page">
    Please wait...
</div>

结果是：

仅当我在开发人员工具中删除 top: 0 指令时，文本才垂直居中（尽管不是完全居中）。

我的问题是根据 JQM 架构获得我想要的东西的正确方法是什么？我不是在寻找 quick/dirty 解决方法，除非没有其他办法。

更新

Answer 1

您需要使用以下css：

top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;

Answer 2

.splashDiv {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    transform: translateY(-50%);
    padding:0;
}

使用它会使您的文本垂直居中对齐。

Answer 3

将启动画面 div 放在 jQM 页面中，而不是使其成为页面：

<div data-role="page" id="page1">
    <div id="cont" role="main" class="ui-content">
      <div class="splashDiv" >
          Please wait...
      </div>
   </div> 
</div>  

.splashDiv {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

DEMO

Answer 4

请试一试。你的 HTML

<div data-role="page" id="page1">
    <div id="cont" role="main" class="ui-content">
      <div class="splashDiv" >
        <span>Please wait...</span>
      </div>
   </div> 
</div>

你的CSS

.splashDiv {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 50%;
    width: 100%;
    text-align: center;
    padding:0;
    overflow: hidden;
    transform: translate(-50%, -50%) 
}
.splashDiv span {
    margin: 0;
    background: yellow;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) 
}

DEMO

如何正确居中文本？

How to properly center the text?

css

jquery-mobile