Html 如何垂直和水平居中 angularjs 材料卡（md-card）？（角度 1.x）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39107698/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How center a angularjs material card (md-card) vertically and horizontally? (Angular 1.x)
提问by Juan Antonio
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.
我有一个问题，我确信会有一个我找不到的简单解决方案。我正在构建一个简单的登录页面，其中有一张有角度的材料卡（md-card），仅此而已。在这种情况下，我在里面有正常的字段。
But the problem appear when I try to center this card vertically and horizontally, it's seem imposible. I've seen the docabout 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.
但是当我尝试将这张卡垂直和水平居中时出现问题，这似乎是不可能的。我已经看过关于这个的文档，这就像使用一样简单，
layout="row" layout-align="center center"但显然对我不起作用。我在 codepen 和 plunker 中搜索了几个例子，但没有人用 md-card 这样做。
Somebody have a simple example to how center only a md-card in a view?
有人有一个简单的例子来说明如何在视图中仅将 md-card 居中？
采纳答案by Juan Antonio
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>
回答by Maciej Rodzo?
You can try by setting dimensions of the element, and then adding:
您可以尝试通过设置元素的尺寸，然后添加：
margin-left: auto;
margin-right: auto;
It should center this horizontally.
它应该水平居中。
回答by camden_kid
Here you go - CodePen
给你 - CodePen
- Column centered
- Row centered, flex="50"
- Card, flex="50"
- Row centered, flex="50"
- 列居中
- 行居中，flex="50"
- 卡片，flex="50"
- 行居中，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>
