无需使用媒体查询即可使文字进入移动屏幕的中心

Question

我有一个要求，我应该使用phonegap ， html ， css ， js和java编写一个混合应用程序。 而且该混合应用程序必须支持多种设备（这是国际产品）。 但是我不应该使用媒体查询。 因此，我决定使用bootstrap ，它做的相当不错。 但是我有一个问题。

我使用引导程序编写了一个自定义页面。 代码如下。 ：

对于text的body ，我给这些css

#loaderText{
    color: #fff;
    margin: 0 auto;
}

.loaderPos{
    /*margin: 69px 101px;*/
    /*width: 50%;
    padding: 0 12%;*/
    padding-top: 22%;
    padding-left: 22%
}  

在portrait模式下，文本似乎位于中间，而在landscape模式下，文本似乎不在上下文中。

我可以使用这样的媒体查询：
media screen (min-height: 360px) and (orientation:landscape){ }然后在其中添加CSS，但是挑战在于：在不使用media queries情况下，以portrait和landscape模式实现正确的对齐。

我该怎么做？

Answer 1

我会建议您使用flexbox 。 无论高度和宽度如何，它将使您的内容中心在水平和垂直方向上仅对齐任何设备。

在您的样式中进行这些更改。 要了解更多信息，请通过此链接

.mainDiv {
  padding: 0px;
  width: 100%;
  height: 99%;
  min-height: 100vh;
  display: flex;
  flex-flow: column;
  justify-content: center;
}

.loaderPos {
  /* margin: 69px 101px; */
  /* padding-top: 22%; */
  /* padding-left: 22%; */
}

Answer 2

如果不使用media-query就可以了，那么您就必须在DOM和CSS进行更改。

HTML：

           <div id="loaderText">
                <p>Please wait while downloading data.</p><br />
                <p>This may take a few minutes.</p>
            </div>

CSS：

#loaderText{
   color: #fff;
   margin: 0 auto;
   text-align: center;
}

#loaderText p {
  display: inline-block;
}

.loaderPos{
  padding-top: 22%;
} 

另外，我还编辑了您的JSFiddle ，请看一看。