Css 如何正确地将文本居中？ 我试图在JQM页面中间垂直和水平地对齐文本。使用1.4.5，默认主题

在my.css中，我有：

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

HTML

请稍候。。。

结果是：

仅当我在开发人员工具中删除

top:0

指令时，文本才垂直居中（尽管没有完全居中）

我的问题是，根据JQM体系结构，获得我想要的东西的正确方式是什么？我不是在寻找快速/肮脏的解决方法，除非没有其他方法

更新

---

您需要使用以下css：

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

---

使用此选项，它会将文本垂直居中对齐。

将初始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%);
}

请稍候。。。
.splashDiv{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}

请试一试。 你的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> 

---

标签jquery mobile是必要的，因为我想遵循JQM的思想，而不是做一些欺骗的事情。我主要希望有一些数据角色或类来帮助解决这个问题。如果在加载库之前需要启动屏幕，甚至不需要将div放在页面中，将其作为正文中的第一个元素，并在加载jQM后立即使用内联样式，我建议您使用带有一点自定义的jQM加载程序styling@deblocker：这也是个好主意，值得一试！谢谢：）@deblocker默认情况下，加载jQM时，它会将正文内容包装在ui页面div中。最佳解决方案是在

mobileinit

事件上手动初始化jQM。像这样的：@Omar:好消息！我总是从你那里学到新东西！顺便说一句，这里是一个比较加载：-50驱动器的屏幕外。50将它稍微放在中间以下，这是由于填充，来自JQM的

.ui内容
类和一些我不清楚的内容。现在，将我与幸福区分开来的是顶部栏，我不需要它。请查看我的更新屏幕截图。@Pablo这是ui内容中的填充1em，请删除它，就这样。@Pablo，Omar是正确的。我已更新我的演示以删除填充：
<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%);
}

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

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