我正在使用 materializecss 并且我希望我的 DIV 以干净且可能是 materializecss 的方式垂直居中？
<div class="container">
<div class="row">
<div class="col s12 infobox center">
<div class="col s6">
<div class="card grey darken-3">
<div class="card-content white-text">
<span class="card-title">BOX 1</span>
<p>BOX 1</p>
</div>
</div>
</div>
<div class="col s6">
<div class="card grey darken-3">
<div class="card-content white-text">
<span class="card-title">BOX 2</span><br>
<p>BOX 2</p>
</div>
</div>
</div>
</div>
</div>
</div>这就是我想要的:
最佳答案
要使 valign-wrapper 正常工作，容器本身必须有一定的高度。大多数只是折叠到内容高度。您可以将高度设置为某个固定值，也可以使用百分比。但是如果你使用百分比，你需要确保你的容器容器也有一定的高度。
在这个例子中，我展示了如何在 body 中使某些东西垂直对齐:
因此，如果将 html 和 body 设置为 100% 高度:
html, body, .my-wrapper {
height: 100%;
}
除了我自己的包装器类之外，请注意我如何将 html 和 body 设置为 100%。
现在我可以将 valign-wrapper 添加到我的容器中，您会看到它的内容居中:
<body>
<div class="my-wrapper valign-wrapper center-align">
... content to be vertically aligned ...
</div>
</body>
重点是您的容器必须有一个高度，否则它将无法工作。您可以自己设置高度，也可以像本例中那样让布局处理它。
已更新
使用网格类水平居中。
您可以结合使用网格大小和偏移量将内容置于中心(或您喜欢的位置):
<body>
<div class="my-wrapper valign-wrapper center-align">
... content to be vertically aligned ...
<div class="row">
<div class="col s12 m8 offset-m2 l6 offset-l3>
... content centered 6 wide on large ...
... content centered 8 wide on medium ...
... content centered 12 wide on small ...
</div>
</div>
</div>
</body>
请注意 row 和 col 齐头并进。
我创建了这个 example on Fiddle for you
(ps:必须有一个 flex 盒子版本才能做到这一点)
关于html - Materializecss div 垂直居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35252337/