使用 Angular Material 指令未居中的框

Question

谁能检查上面的代码我不知道为什么我不能用指令 layout-align="center center" 把盒子放在中间？谢谢

代码片段：

<html>

<head>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-messages.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-sanitize.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
  <style type="text/css">
    .wrapper {
      width: 100%;
      height: 100%;
    }
    .one {
      background: tomato;
      width: 50px;
      height: 50px;
    }
    .two {
      background: green;
      width: 50px;
      height: 50px;
    }
  </style>
</head>

<body ng-app="testApp">
  <div class="wrapper" layout-align="center center">
    <div class="container" layout-gt-xs="row" layout-xs="columnn" flex="none">
      <div class="one" flex="initial"></div>
      <div class="two" flex="initial"></div>
    </div>
  </div>
  <script type="text/javascript">
    var app = angular.module("testApp", ["ngMaterial"]);
  </script>
</body>

</html>

Answer 1

感谢@ManojKumar 的回答，layout-align 指令只影响直系子级。

使用 Angular Material 指令未居中的框

Boxes not centered using Angular Material directive

css

angular-material