HowTo: Responsive vertical centering

Official Content
This documentation is valid for:

Consider a Responsive Web Application where we need to center the login window in the web page.

By setting an element’s width, height and margins in viewport units, you can center it very easily.

In our example, the login web panel's main Responsive Table has the Class property set to "TableCenter", which is a class we've defined in the Theme.

i2016_03_22_20_15_552_png

The "TableCenter" class has the following properties:

    width: 60vw;
    height: 60vh;
    margin: 20vh auto;

i2016_03_22_20_19_103_png

At runtime it looks as follows:

i2016_03_22_19_57_321_png

Running in a phone, it looks like this:

Running phone sample