无法将聚合物元件垂直居中在全出血体内

Question

我有一个聚合物元素，我要将其插入到 html 页面中，我在 body 标记中使用 fullbleed 以不留边距，我希望该元素填满整个页面。我试图在页面上将此元素中的一些文本垂直居中，但我使用的常用布局属性似乎没有任何效果。见附件示例。

<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

我能够通过将垂直布局属性移动到#test div 并使用中心对齐代替中心然后使其在 chrome 41 和 firefox 36.0.4 中工作将自我中心属性放在内部 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

无法将聚合物元件垂直居中在全出血体内

Trouble vertically centering a polymer element inside a fullbleed body

html

css

flexbox

polymer