How center a angularjs material card (md-card) vertically and horizontally? (Angular 1.x)

Question

I\'ve a problem I\'m sure would had a simple solution that I don\'t find. I\'m building a simple login page where I\'ve a angular material card (md-card) and nothing more. Insid

Answer 1

Here you go - CodePen

• Column centered
  • Row centered, flex="50"
    • Card, flex="50"

Markup

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-fill layout="column" style="background:green" layout-align="center">
    <div flex="50" layout="row" layout-align="center">
      <md-card flex="50"></md-card>
    </div>
</div>

Answer 2

Finally, I found a simple way to do this:

<div layout-fill layout="column" layout-align="center none">
    <div layout="row" layout-align="center none">

        <md-card>

            <md-card-title>
                <md-card-title-text>
                    <span class="md-headline">Card title</span>
                </md-card-title-text>
            </md-card-title>

            <md-card-content>
                Card content
            </md-card-content>

        </md-card>
    </div>
</div>

Answer 3

You can try by setting dimensions of the element, and then adding:

margin-left: auto;
margin-right: auto;

It should center this horizontally.