Sam Claus Sam Claus - 11 months ago 72
AngularJS Question

Align child md-card to center of parent using angular-material?

Here I have a login screen consisting of a high resolution image background, and a simple login card, which I want to center in the middle of the screen.

How can I center the card vertically and horizontally in the parent, which is a simple

with a background image? Here is my HTML, for which I have not made any external CSS classes yet:

<div style="background-image: url('./res/img/bg-2.jpg'); width: 100%; height: 100%; background-size: cover;" layout-align="center center">
<md-card style="width: 30%; margin: 0;" layout-padding md-whiteframe="10">
<form name="loginForm" novalidate ng-model="loginForm">
<h2 style="margin-top: 0;">Login</h2>
<md-input-container class="md-block" flex-gt-sm>
<input type="text" ng-model="username">
<md-input-container class="md-block" flex-gt-sm>
<input type="text" ng-model="password">
<div layout="row">
<span flex></span>
<md-button class="md-primary md-raised" ng-click="login.login(username, password)">Login</md-button>
<md-button ng-click="login.register()">Register</md-button>

I've already fiddled with
. Using the
attribute of the card allowed me to center it horizontally but not vertically. Another question's answer--pertaining to
only--said to style the child with
display: inline-block;
and the parent with
text-align: center;
, but this only centered the card horizontally and aligned the textfields and text to the center of the card as well (I definitely don't want that). Any help is greatly appreciated as I am very new to CSS and web-programming.

Answer Source

You need both a layout and layout-align attribute on your containing div element, so:

layout="row" layout-align="center center"

See example here -

See the examples in the docs -