The intent of my answer was not to teach you how to vertically align things using CSS, but to answer your question on how to customize your CSS without “without screwing up ionic CSS components”.
I’ll give you the benefit of the doubt here and show you one of many ways to accomplish vertical centering.
Here, I’ve given the
ion-content a class of
loginForm and the inside div a class of
loginForm-wrapper. I’ve also given my inputs a class of
In the CSS, I am using absolute positioning and a negative top margin to position the
.loginForm-wrapper in the center and giving the inputs rounded corners using