How to center a div vertically?


I have tried several methods like “Centering Percentage Width/Height Elements”, 6 Methods For Vertical Centering With CSS and seen past thread. They don’t work for me with the Ionic blank app template. Somehow the h1 heading will be off-screen or hidden behind the header bar.

I have created a CodePen:

Currently I am using percentage CSS padding-top to push it down from the header bar. But if it is viewed on wildly different sized devices, or orientation, the padding may or may not be enough, leaving it not quite centered vertically.

#tobecenteredandmiddled {
  padding-top: 10%;
  text-align: center;
  vertical-align: middle;

I suppose this is quite a common requirement, like placing a image in the center like the Splashscreen, no matter the device resolution, display size or orientation. How do we do this easily?