How to create a form authentication on the verticaly middle of the phone screen?


#1

Hi there,

How would you do that for in with Ionic, or maybe simple CSS ?
I use ionic components as possible, and CSS in other cases but here i didn’t found anything to do that.
However, positioning elements in a phone application (that highly depends of screen resolution) is an art that ionic excels, and I have to learn about it.


#2

hi,
try this : http://codepen.io/mhartington/pen/tAeJg

.....

#3

Your css class definition is great, but some others elements are badly impacted.
Please see this two folowwing views:
Here the original one :

And here after your css class is applied :

Do you think that its possible to just remove the horizontal resizing, conserving the rest of rules ?


#5

Try to apply margin: 0 auto; to your form content.
And be sure that it’s parents have with and height set to 100%.

if it not works, you can try to set a div with: display:table, and it’s child (let see, your form) have display: table-cell; vertical-align: middle;