title: Position a row at center in XDK
body: <p>I am using Intel XDK to build an app with app designer.
  I've got a login screen info (UID, PWD and Login Button) inside a row.</p>
  
  <p>Now I want this row to appear at screen center(horizontal and vertical), irrespective of screen size.</p>
  
  <p>Do I have to do this with media query with different sizes or there is any other way of doing this without using the media queries ?</p>
  
  <p>code :</p>
  
  <pre><code>&lt;div class="upage background" id="mainpage"&gt;
              &lt;div class="upage-outer"&gt;
                  &lt;div class="uib-header header-bg container-group inner-element uib_w_1" data-uib="layout/header" data-ver="0"&gt;
                      &lt;h2&gt;&lt;/h2&gt;
                      &lt;div class="widget-container wrapping-col single-centered"&gt;&lt;/div&gt;
                      &lt;div class="widget-container content-area horiz-area wrapping-col left"&gt;&lt;/div&gt;
                      &lt;div class="widget-container content-area horiz-area wrapping-col right"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="upage-content content-area vertical-col" id="page_92_17"&gt;
  
                      &lt;div class="grid grid-pad urow uib_row_1 space" data-uib="layout/row" data-ver="0"&gt;
                          &lt;div class="col uib_col_1 col-0_12-12" data-uib="layout/col" data-ver="0"&gt;
                              &lt;div class="widget-container content-area vertical-col"&gt;
  
                                  &lt;div class="table-thing widget uib_w_3 d-margins" data-uib="twitter%20bootstrap/input" data-ver="1"&gt;
                                      &lt;label class="narrow-control"&gt;&lt;/label&gt;
                                      &lt;input class="wide-control form-control default" type="text" placeholder="Username"&gt;
                                  &lt;/div&gt;
                                  &lt;div class="table-thing widget uib_w_4 d-margins" data-uib="twitter%20bootstrap/input" data-ver="1"&gt;
                                      &lt;label class="narrow-control"&gt;&lt;/label&gt;
                                      &lt;input class="wide-control form-control default" type="password" placeholder="Password"&gt;
                                  &lt;/div&gt;
                                  &lt;button class="btn widget uib_w_5 d-margins btn-primary" data-uib="twitter%20bootstrap/button" data-ver="1"&gt;Login&lt;i class="glyphicon glyphicon-chevron-right button-icon-right" data-position="right"&gt;&lt;/i&gt;
                                  &lt;/button&gt;&lt;span class="uib_shim"&gt;&lt;/span&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;span class="uib_shim"&gt;&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="uib-footer uib-footer-fixed footer-bg container-group inner-element uib_w_2" data-uib="layout/footer" data-ver="0"&gt;
                      &lt;h2&gt;&lt;/h2&gt;
                      &lt;div class="widget-container wrapping-col single-centered"&gt;&lt;/div&gt;
                      &lt;div class="widget-container content-area horiz-area wrapping-col left"&gt;&lt;/div&gt;
                      &lt;div class="widget-container content-area horiz-area wrapping-col right"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>