如何正确居中文本？

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架构获得我想要的东西的正确方法是什么？我不是在寻找快速/肮脏的解决方法，除非没有别的办法。

更新

Answer 1

将你的splash div放在jQM页面中，而不是将其作为页面：

setTimeout(() => {
   const sticky = new Foundation.Sticky($('.sticky'));
   $('.sticky').foundation('_calc', true);
}, 2000);

<强> DEMO

Answer 2

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

使用此选项可将文本垂直居中对齐。

Answer 3

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

Answer 4

您需要使用以下css：

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