Centering Content in Flex 4

I'm building a custom component that extends SkinnableContainer. I can center the content either vertically or horizontally inside it, but not both-- and that is what开发者_如何学JAVA I need.

I'm setting the layout to HorizontalLayout for the component and setting verticalAlign to middle.

Then I'm creating a canvas to surround another component that goes inside this component, and setting that canvas width to 100%, and then setting textAlign=center, but no dice.

Any help is appreciated.

Use the horizontalCenter and verticalCenter properties to center your groups. The value is the number of pixels from either center where the sign of value denotes direction, 0 is absolute center.

This'll do the trick (assuming you want horizontal layout for your items). The 's' namespace refers to the spark components, since you're asking about flex 4 I assume Halo isn't of interest.

<s:Group>
    <!-- Any parent with BasicLayout will acknowledge horizontalCenter and verticalCenter -->
    <s:layout>
         <s:BasicLayout />
    </s:layout>

    <s:Group horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:HorizontalLayout/>
        </s:layout>

        <s:Button />
        <s:Button />
        <s:Button />
    </s:Group>
</s:Group>