我正在尝试学习如何使用谷歌材料设计指南制作响应式网页用户界面 . 在目前的所有材料设计实施中,我选择使用聚合物材料设计 .

我不确定的是如何在页面内定位元素(/ components) . 例如,我写了这个简单的主页

<div>
    <div horizontal center-justified layout>
        <div>
            <paper-button id="my" raised class="mainContentButton">Raised button</paper-button>
        </div>
        <div>
            <paper-button raised class="mainContentButton">Raised button</paper-button>
        </div>
    </div>
    <div horizontal center-justified layout>
        <div>
            <paper-button raised class="mainContentButton">Raised button</paper-button>
        </div>
        <div>
            <paper-button raised class="mainContentButton">Raised button</paper-button>
        </div>
    </div>
</div>
.mainContentButton {
width: 35vw;
height: 25vw;
background: #03a9f4;

}

我的意图是有4个大按钮,覆盖页面的大部分,同时作为页面中心(水平和垂直)的水平部分,我在聚合物材料的模糊部分中找到了关于“水平中心对齐布局”的某处“我给每个div的属性 . 对于垂直居中,我找不到任何解决方案 .

注意:我来自使用bootstrap网格系统进行定位的背景,这意味着使用div(如row和col)的类来定位页面中的元素 . 现在我只想了解材料设计(聚合物?)是否带有用于在页面中定位元素的任何工具,或者为此我需要采用不同的方法(使用css或使用其他前端框架)

欢迎任何帮助 . 提前致谢!