aligning angular material card in center of the page
I made a Registration script which allows user to Sign Up to my site. Now the problem I am experiencing that the angular material card, in which the sign up interface lies, isn't at center. I've tried many things including <center> and [layout-align="center center"], still nothing works
My code:
<md-content class="md-padding" layout-xs="column" layout="row">
<div flex-xs flex-gt-xs="40" layout="column" layout-align="center center">
<md-card class="card-40-center">
<md-card-title>
<md-card-title-text>
<span class="md-headline">Sign Up</span>
</md-card-title-text>
</md-card-title>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" class="signup_form">
<div class="md-padding" layout-align="center">
<div layout="row">
<md-input-container flex="100">
<label>First name</label>
<input>
</md-input-container>
<md-input-container flex="100">
<label>Last name</label>
<input>
</md-input-container>
</div>
<div layout="row">
<md-input-container flex="100">
<label>Username</label>
<input>
</md-input-container>
<md-input-container flex="100">
<label>Email</label>
<input type="email">
</md-input-container>
</div>
<div layout="row">
<md-input-container flex="100">
<label>Password</label>
<input type="password">
</md-input-container>
<md-input-container flex="100">
<label>Repeat Password</label>
<input type="password">
</md-input-container>
</div>
<div ng-controller="selectGender as ctrl">
<div layout="row">
<md-input-container flex="100" layout="column" layout-align="center">
<label>Gender</label>
<md-select ng-model="ctrl.userState">
<md-option
ng-repeat="state in ctrl.states"
value="{{state.abbrev}}"
ng-disabled="$index === 2"
>
{{state.abbrev}}
</md-option>
</md-select>
</md-input-container>
<div ng-controller="selectDate">
<div flex="100">
<md-datepicker
ng-model="myDate"
md-placeholder="Enter date"
></md-datepicker>
</div>
</div>
</div>
</div>
</div>
<md-card-actions layout="row" layout-align="center">
<br>
<center>
<md-button class="md-primary md-raised signup_button" type="submit">Sign Up</md-button>
</center>
</form>
</md-card-actions>
<md-card-content>
</md-card-content>
</md-card>
</div>
</md-content>
