在全排气体内垂直对中聚合物元件的故障

Question

我有一个聚合物元素，我将它插入到html页面中，在该页面中，我在body标记中使用了完全出血，这样就不会留下任何空白，我希望这个元素能够填充整个页面。我试图在页面上竖直地居中这个元素中的一些文本，但是我使用的通常的布局属性似乎没有任何效果。请参阅所附示例。

​

<script src="http://www.polymer-project.org/0.5/webcomponents.js"></script>
<link rel="import" href="http://www.polymer-project.org/0.5/components/polymer/polymer.html">

<polymer-element name="polymer-css-test">
  <template>
    <style>
      #test {
        background-color: green;
      }
    </style>
    <div id="test" fit>
      <div vertical layout center>
        I want this text to be vertically and horizontally centered.
      </div>
    </div>
  </template>
  <script>
    Polymer('polymer-css-test', {
      ready: function () {
      }
    });
  </script>
</polymer-element>
<body unresolved fullbleed layout vertical>
  <polymer-css-test></polymer-css-test>
</body>

​

Answer 1

我能够让它在chrome 41和firefox 36.0.4中工作，方法是将垂直布局属性移动到#test div，并使用中间对齐代替中心，然后在内部div上放置自中心属性。

    <script src="http://www.polymer-project.org/0.5/webcomponents.js"></script>
    <link rel="import" href="http://www.polymer-project.org/0.5/components/polymer/polymer.html">

    <polymer-element name="polymer-css-test">
      <template>
        <style>
          #test {
            background-color: green;
          }
        </style>
        <div id="test" fit layout vertical center-justified>
          <div self-center>
            I want this text to be vertically and horizontally centered.
          </div>
        </div>
      </template>
      <script>
        Polymer('polymer-css-test', {
          ready: function () {
          }
        });
      </script>
    </polymer-element>
    <body unresolved fullbleed layout vertical>
      <polymer-css-test></polymer-css-test>
    </body>

这里的示例http://plnkr.co/edit/2fF4FeJn4LbdMm8dyhiD?p=preview