Making text to go to center of the mobile screen without using media queries

Question

I've a requirement where I'm supposed to write an hybrid app by using phonegap , html , css , js and java . And that hybrid app has to support wide range of devices (It is an international product). But I'm not supposed to use media queries. So I decided to use bootstrap which does a pretty decent job. However I've a problem.

I wrote a custom page by using bootstrap. code is as given here. :

for text in body , I gave these css

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

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

The text appears to be at center in portrait mode, but appears to be out of context in landscape mode.

I could use a media query like this:
media screen (min-height: 360px) and (orientation:landscape){ } and add css there but the challenge is: Achieve proper alignment in both portrait and landscape mode without using media queries .

How can I do it?

Answer 1

I will advice you to use flexbox . It will make your content center aligned, both horizontally and vertically, only any device, no matter the height and width.

Make these changes in your styles. To know more go through this link

.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

As you want it without using media-query then you've to make changes in your DOM as well as in your CSS too.

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%;
} 

Also I've edited your JSFiddle , please have a look.