Vertical centering with Flex

<Divclass= "Flex-cont flex-centerbox">       <Divclass= "Center-cont">            <H2>Title</H2>            <P>Infomation</P>            <P>Infomation</P>            <Buttonclass= "F-btn">Btn</Button>       </Div></Div>

Css

. Flex-cont{/*"parent element" defined as Flexbox*/Display:-webkit-box;Display:-webkit-flex;Display:Flex;}. Flex-item{/*Gives the "child element" the ability to stretch freely*/-webkit-box-flex:1;-webkit-flex:1;Flex:1;width:0%;}/*Center Vertically*/. Flex-centerbox{width:100%;Height:200px;background:#fafafa;  /*   child elements along the spindle pair aligns -Centered  */ -webkit-box-pack :  center ; -webkit-justify-content :  center ;  Justify-content :  center ; /*   */ -webkit-box-align :  center ; -webkit-align-items :  center ;  Align-items :  center ;  Border-top:1px solid #ddd;Border-bottom:1px solid #ddd;padding:10px 0;margin:10px 0;}. Center-cont{Display:Block;background:#ddd;text-align:Center;padding:20px;margin:10px;}

Vertical centering with Flex