title: Center align the viewport
body: <p>I have created an app which launches a viewport on launch. This covers the entire screen. So i provided a width and height for it. The next requirement being the app being center aligned in the screen. </p>
  
  <p>The code I have used is:</p>
  
  <pre><code>//&lt;debug&gt;
   Ext.Loader.setConfig({disableCaching:false});
   Ext.Loader.setPath({
  'Ext': 'sdk/src'
  });
  //&lt;/debug&gt;
  
  Ext.application({
  name: 'SEPA',
  controllers: ["MainController"],
  requires: [
      'Ext.MessageBox'
  ],
  
  controllers:['MainController'],
  
  icon: {
      57: 'resources/icons/Icon.png',
      72: 'resources/icons/Icon~ipad.png',
      114: 'resources/icons/Icon@2x.png',
      144: 'resources/icons/Icon~ipad@2x.png'
  },
  
  phoneStartupScreen: 'resources/loading/Homescreen.jpg',
  tabletStartupScreen: 'resources/loading/Homescreen~ipad.jpg',
  fullscreen: false,
  //centered:true,
   // margin: 100,
  
  launch: function() {
      Ext.Viewport.setWidth(320);
      Ext.Viewport.setHeight(480);
  
      //Ext.Viewport.setCentered(false);
     // Ext.Viewport.setRight(2);
  
      // Destroy the #appLoadingIndicator element
  
  },
  
  onUpdated: function() {
      Ext.Msg.confirm(
          "Application Update",
          "This application has just successfully been updated to the latest version. Reload now?",
          function() {
              window.location.reload();
          }
      );
  }
   });
  </code></pre>
  
  <p>As you can see, the app is placed in the left most corner of the browser. How can i get it in the center of the screen?</p>
  
  <p><img src="https://i.stack.imgur.com/ZyHJW.png" alt="enter image description here"></p>
  
  <p>Any help is appreciated.
  Thanks in advance.</p>