Why don't horizontalCenter and verticalCenter work in Spark (Flex 4)?

Here's code that splits the screen into two columns, left and right. Then it puts a box in each column and attempts to center them. The horizontalCenter and verticalCenter properties are ignored:

<?xml version="1.0" encoding="utf-8"?>
<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"
               backgroundColor="blue">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:SkinnableContainer id="mainContentArea"
             top="100" bottom="100"
             backgroundColor="red">
        <s:layout>
            <s:ConstraintLayout>
                <s:constraintColumns>
                    <s:ConstraintColumn id="col1" width="{width/2}" />
                    <s:ConstraintColumn id="col2" width="{width/2}" />              
                </s:constraintColumns>                  
            </s:ConstraintLayout>
        </s:layout>
        <s:BorderContainer id="greenCo开发者_如何学编程ntainer"
                           backgroundColor="green"
                           width="400" height="300"
                           horizontalCenter="col1:0"
                           verticalCenter="0">
        </s:BorderContainer>    
        <s:BorderContainer id="yellowContainer"
                           backgroundColor="yellow"
                           width="200" height="150"
                           horizontalCenter="col2:0"
                           verticalCenter="0">
        </s:BorderContainer>        
    </s:SkinnableContainer>
</s:Application>

From the documentation:

Per-element supported constraints are left, right, top, bottom, baseline, percentWidth, and percentHeight. Element's minimum and maximum sizes will always be respected.

So horizontalCenter and verticalCenter are not in the list of supported constraints.

I recommend you to use the following code:

<?xml version="1.0" encoding="utf-8"?>
<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"
    backgroundColor="blue">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:SkinnableContainer id="mainContentArea"
        top="100" bottom="100"
        backgroundColor="red" left="0" right="0">
        <s:layout>
            <s:ConstraintLayout>
                <s:constraintColumns>
                    <s:ConstraintColumn id="col1" width="50%" />
                    <s:ConstraintColumn id="col2" width="50%" />              
                </s:constraintColumns>                  
            </s:ConstraintLayout>
        </s:layout>
        <s:Group left="col1:0" right="col1:0" top="0" bottom="0">
            <s:BorderContainer id="greenContainer"
                backgroundColor="green"
                width="400" height="300"
                horizontalCenter="0"
                verticalCenter="0">
            </s:BorderContainer>    
        </s:Group>
        <s:Group left="col2:0" right="col2:0" top="0" bottom="0">
            <s:BorderContainer id="yellowContainer"
                backgroundColor="yellow"
                width="200" height="150"
                horizontalCenter="0"
                verticalCenter="0">
            </s:BorderContainer>        
        </s:Group>
    </s:SkinnableContainer>
</s:Application>