Vertical centering in Spark/Flex

Question

I am horizontally dividing my panel between two elements.
To acheive that I am using the following layout controls
     <s:layout>          
          <s:HorizontalLayout>
             <s:paddingBottom>20</s:paddingBottom>     
             <s:paddingTop>50</s:paddingTop>
             <s:paddingLeft>20</s:paddingLeft>
             <s:paddingRight>20</s:paddingRight>
             <s:gap>300</s:gap>
          </s:HorizontalLayout>          
     </s:layout>
This is splitting the panel correctly on the horizonal front.
However, I am then trying to center my other components vertically within the panel and am failing.  My non-spark component seems to center perfectly using the following:
     <mx:VBox verticalGap="20" horizontalAlign="center">
          </mx:VBox>
However, when I add a second panel I can't seem to figure out how to center it vertically.  I am using the following code:
<s:Panel id="nodeExplorer" backgroundColor="0xFFFFFF" creationComplete="hidePanelHeader(event)" horizontalCenter="0" verticalCenter="0">
     <s:layout>
     <s:VerticalLayout>
        </s:VerticalLayout>     
     </s:layout>
</s:Panel>
Any advice on how to verticaly center that second panel is welcome.

Answer 1

UbuntuPenguin and _spoboyle -
   Thanks for the help.  Setting the verticalAlign to middle and height to 100% seemed to mostly solve the issue.
That seems to line up the VBox and the Panel..  However, when I place an object into the panel that object isn't centered vertically within that panel.  I have a mouse listener on the images in the VBox and when you click one it removes it from the VBox and adds it to the panel.  The VBox recenters everything correctly, but the moved object is not centered.
<s:Panel verticalCenter="0" id="mainPanel" visible="true" width="100%" height="100%" backgroundColor="0x000000" creationComplete="hidePanelHeader(event)">
     <s:layout>          
          <s:HorizontalLayout>
               <!--
             <s:paddingBottom>50</s:paddingBottom>     
             <s:paddingTop>50</s:paddingTop>
             <s:paddingLeft>20</s:paddingLeft>
             <s:paddingRight>20</s:paddingRight> -->
             <s:gap>300</s:gap>
             <s:verticalAlign>middle</s:verticalAlign>
          </s:HorizontalLayout>          
     </s:layout>
     <mx:VBox backgroundColor="0xFFFFFF" height="100%" verticalGap="20" verticalAlign="middle">
          <mx:Image source="@Embed(source='p6-550.png')" scaleX=".5" scaleY=".5"/>
          <mx:Image source="@Embed(source='p6-550.png')" scaleX=".5" scaleY=".5"/>
          <mx:Image source="@Embed(source='p6-550.png')" scaleX=".5" scaleY=".5"/>
          <mx:Image source="@Embed(source='p7-750.png')" scaleX=".5" scaleY=".5" id="p71" creationComplete="blinkP7Disk(p71)" mouseDown="exploreNode(p71)"/>                              
          <mx:Image source="@Embed(source='p7-750.png')" scaleX=".5" scaleY=".5" id="p72" creationComplete="blinkP7Disk(p72)"/>
          <mx:Image source="@Embed(source='p7-750.png')" scaleX=".5" scaleY=".5" id="p73" creationComplete="blinkP7Disk(p73)"/>
     </mx:VBox>
     <s:Panel id="nodeExplorer" backgroundColor="0xFFFFFF" creationComplete="hidePanelHeader(event)"  height="100%">
          <s:layout>
               <s:VerticalLayout>
                    <s:verticalAlign>middle</s:verticalAlign>
                    <s:gap>20</s:gap>
               </s:VerticalLayout>     
          </s:layout>
     </s:Panel>
</s:Panel>