angularjs - Angular Materials flex box model not apply correctly -

i working angualar , angular material , trying create linke -> http://gyazo.com/51b99edb716687f6096e4cff7d009e8d

but reason image (logo) stretches on de width, have -> http://gyazo.com/277f2bcf6b47861412d8e5df949d8313 can't seem in middle of screen

if 1 can me out , me going flex box model appreciate it

this code:

<div layout="row" flex layout-padding layout-fill layout-align="center center">     <div flex="40" flex-lg="50" flex-md="70" flex-sm="100">         <md-card>             <md-toolbar>                 <div>                     <div><img src="../images/logo.png" alt="zazzle logo"></div>                     <h1 class="md-headline">                     sign                      </h1>                 </div>             </md-toolbar>         </md-card>     </div> </div> 

to center add div layout="row" , within div add <span flex></span> before , after div trying center.

this how login page center input divs. still trying learn myself, not sure if right way or not can surely try it:

<div layout="row">     <span flex></span>     <div class="well" flex='30'>         <form ng-submit="vm.login()" name="loginform">             <md-input-container>                 <label>email</label>                 <input type="text" ng-model="vm.email" required/>                 <div ng-messages="loginform.email.$error" ng-if='loginform.email.$dirty'>                     <div ng-message="required">this required.</div>                 </div>             </md-input-container>             <md-input-container>                 <label>password</label>                 <input type="password" ng-model="vm.password"/>             </md-input-container>             <md-button type="submit" class="md-raised md-primary">submit</md-button>         </form>     </div>     <span flex></span> </div> 

hope helps :)