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. Inside it I've the normal fields in this cases.

But the problem appear when I try to center this card vertically and horizontally, it's seem imposible. I've seen the doc about this and this would be so simple as use layout="row" layout-align="center center"but obviusly don't work for me. I searched several examples in codepen and plunker but nobody do this with md-card.

Somebody have a simple example to how center only a md-card in a view?

Solution 1

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>

Solution 2

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

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

It should center this horizontally.

Solution 3

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>

Comments

[Juan Antonio]

Thanks but this don't work for me. I don't understand why this code : <div layout="column" layout-align="center none"> Sample </div> don't work and I don't see "Sample" center vertically.

[Juan Antonio]

I just find a similar way to do this, but without flex="50". Thanks!

[camden_kid]

@JuanAntonio Glad to be of help. I just added flex=50 for extra info.

[Ka Mok]

What do you have to import to get access to layout-fill?

[Kirby]

this fixed it for me.

[Yennefer]

This answer is more complete: stackoverflow.com/questions/45212473/…

[Juan Antonio]

Thanks for the link @Pier