Html 角材料布局对齐=“中心中心”不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33814343/
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
Angular material layout-align = "center center" not working
提问by Prabhdeep
I'm trying to use the layout-align = "center center" which should align the content at center both vertically and horizontally. But it's only aligning the content horizontally and not vertically.
我正在尝试使用 layout-align = "center center" 它应该在垂直和水平方向的中心对齐内容。但它只是水平对齐内容而不是垂直对齐。
Here's the plnkr linkof the code I'm trying.
这是我正在尝试的代码的 plnkr链接。
<body ng-app="app" ng-controller="appCtrl">
<md-toolbar>
<div class="md-toolbar-tools">
<h2 flex>Hello Angular-material!</h2>
</div>
</md-toolbar>
<div class="flexbox-parent">
<div layout="row" layout-align="center center">
<div flex="15">First line</div>
<div flex="15">Second line</div>
</div>
</div>
</body>
回答by Brady Liles
The reason why it is not centering it vertically is because your div containing the layout-align attribute does not have a height.
它没有垂直居中的原因是因为包含 layout-align 属性的 div 没有高度。
Try something like
尝试类似的东西
<div class="flexbox-parent">
<div layout="row" layout-align="center center" style="min-height: 500px">
<div flex="15">First line</div>
<div flex="15">Second line</div>
</div>
</div>
回答by Nikhil Raj A
Flexbox vertical centering works well with defining height for the parent element:
Flexbox 垂直居中在定义父元素高度时效果很好：
<div class="flexbox-parent">
<div layout="row" layout-align="center center" style="height: 100vh">
<div flex="15">First line</div>
<div flex="15">Second line</div>
</div>
</div>
回答by smedasn
Just use
只需使用
fxLayout="row" fxLayoutAlign="center center" style="height: 100vh; width: 100vh"
on your parent div
在你的父 div 上
