無需使用媒體查詢即可使文字進入移動屏幕的中心

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 ，請看一看。