title: Placing Flex-component in the middle of the screen
body: <p>I have a very general question and have prepared a simple test case.</p>
  
  <p>When using BasicLayout (i.e. absolute positioning) - what is the best approach to place a Flex component in the center of the application?</p>
  
  <p>In the test case below I'm using <strong>x="{width/2}"</strong> but this gives me at least 2 problems:</p>
  
  <ol>
  <li><p>How do I account for the component dimensions (the ProgressBar in the test case)?</p></li>
  <li><p>Is the binding <strong>{width/2}</strong> a good idea to use? Wouldn't it send unnecessary DATA_CHANGE events in some cases?</p></li>
  </ol>
  
  <p>And finally I wonder, how this all applies to full screen applications using <strong>StageScaleMode.SHOW_ALL</strong> - because currently my application is aligned to the top-left in the full screen mode and there is a white dead zone on the right of it. (Which is at least a change from pure Flash/AS3 behaviour, where the full screen content is displayed in the center of the screen and 2 dead zones on the left and right).</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;s:Application 
      xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:mx="library://ns.adobe.com/flex/mx"
      width="700" height="525" 
      backgroundColor="#CCFFCC"
      initialize="systemManager.stage.scaleMode=StageScaleMode.SHOW_ALL"&gt;
  
      &lt;fx:Script&gt;
          &lt;![CDATA[
              private function fullScreen(event:MouseEvent):void {
                  stage.displayState = 
                      stage.displayState == StageDisplayState.NORMAL ?
                      StageDisplayState.FULL_SCREEN :
                      StageDisplayState.NORMAL;
              }
          ]]&gt;
      &lt;/fx:Script&gt;
  
      &lt;s:states&gt;
          &lt;s:State name="normal" /&gt;
          &lt;s:State name="connected" /&gt;
      &lt;/s:states&gt;
  
      &lt;s:CheckBox right="10" bottom="10" 
          label="Full screen" 
          click="fullScreen(event)" /&gt;
  
      &lt;mx:ProgressBar indeterminate="true" 
          x="{width/2}" y="{height/2}" 
          label="Connecting..." labelPlacement="center" 
          includeIn="normal" /&gt;
  
  &lt;/s:Application&gt;            
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/phZjW.png" alt="enter image description here"> </p>