Question

我正在尝试使用layout-align =“center center”，它应该在垂直和水平方向上对齐中心的内容。但它只是水平对齐内容而不是垂直对齐。

这是我正在尝试的代码的plnkr link。

<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>

Answer 1

它没有垂直居中的原因是因为包含layout-align属性的div没有高度。

尝试类似

的内容

<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>

Answer 2

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>

Answer 3

只需使用

fxLayout="row" fxLayoutAlign="center center" style="height: 100vh; width: 100vh"

在您的父div上

角度材料布局 - 对齐=“中心”不起作用

3 个答案: