problem in using flexbox in sapui5

Hi,

I am trying to use a flexbox inside a page in mobile app. I have placed 3 controls in my flexbox. I want to align the controls in the center of the page.

With my code I find that the controls gets aligned at the center in horizontal direction. However it is at the top in the vertical direction. I want to place the controls in the center along vertical direction also. My code is as follows

var app = new sap.m.App("myApp", {initialPage:"page1"});

// page1 should be displayed first

// create the first page of your application

var page1 = new sap.m.Page("page1", { title: "Welcome",

content:

new sap.m.FlexBox({

width: "100%",

height: "100%",

direction: sap.m.FlexDirection.Column,

justifyContent : sap.m.FlexJustifyContent.Center,

alignItems: sap.m.FlexAlignItems.Center,

items: [

new sap.m.Input({

placeholder: "Enter Username ...",

width : "200px",

}),

new sap.m.Input({

placeholder: "Enter Password ...",

type: "Password",

width : "200px",

}),

new sap.m.Button({

type: "Accept",

text: "Submit",

width: "200px",

}),

]

}),

});

app.addPage(page1);

// place the App into the HTML document

app.placeAt("content");

-------------------------------------------------------

Pls help me where I am going wrong.

thanks and regards,

krishna