Html Materializecss div垂直居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35252337/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Materializecss div vertically centered
提问by Mentori
I'm using materializecss and i want my DIV to be vertically centered the clean and maybe materializecss way?
我正在使用 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>This is what i want: 
这就是我要的：
回答by Michael
To make valign-wrapperwork the container itself must have some height. Most just collapseto the content height. You can either set the height to some fixed value or you can use percentages. But if you use percentages you need to make sure that your containers container also have some height.
为了valign-wrapper工作，容器本身必须有一定的高度。大多数只是折叠到内容高度。您可以将高度设置为某个固定值，也可以使用百分比。但是如果你使用百分比，你需要确保你的容器容器也有一定的高度。
In this example I'm showing how to make something vertically aligned inside the body:
在这个例子中，我展示了如何在 内垂直对齐body：
So if you set htmland bodyto height 100%:
因此，如果您将html和设置body为高度 100%：
html, body, .my-wrapper {
height: 100%;
}
Notice how I set both htmland bodyto 100% in addition to my own wrapper class.
请注意，除了我自己的包装类之外，我如何将html和都设置body为 100%。
Now I can add the valign-wrapperto my container and you'll see that it's content get's centered:
现在我可以将它添加valign-wrapper到我的容器中，你会看到它的内容居中：
<body>
<div class="my-wrapper valign-wrapper center-align">
... content to be vertically aligned ...
</div>
</body>
The point is your container musthave a height otherwise it doesn't work. You can set the height yourself or let the layout handle it like in this case.
关键是你的容器必须有一个高度，否则它不起作用。您可以自己设置高度，也可以让布局像在这种情况下一样处理它。
Updated
更新
Horizontal centering using grid classes.
使用网格类进行水平居中。
You can use a combination of grid sizes and offset to put content in the center (or where you fancy it):
您可以使用网格大小和偏移量的组合将内容放在中心（或您喜欢的地方）：
<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>
Notice that rowand colgoes hand in hand.
请注意，row并且col相辅相成。
I created this example on Fiddle for you
我创造了这个 example on Fiddle for you
(ps: there must be a flex-box version of doing this as well)
（ps：必须有一个 flex-box 版本的这样做）
回答by Mentori
In order to verticaly align a div,section or a part of design using materialize you should add heightto .valign-wrapperas you can see here: materializecss
为了使用 materialize 垂直对齐 div、section 或设计的一部分，您应该添加height到.valign-wrapper这里，如您所见：materializecss
Demo: demo
演示：演示
回答by hulkinBrain
i did it by adding an innerdiv class to the row which contains your infobox and then apply the below css, check if it suits you:
我通过向包含您的信息框的行添加一个innerdiv类然后应用以下css来完成它，检查它是否适合您：
<style>
.innerDiv{
width: inherit;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
<div class="container">
<div class="row innerdiv">
<div class="col s12 infobox center-align">
<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>
回答by nicowi
Materializecss gives you some small helpers http://materializecss.com/helpers.html
Materializecss 给你一些小帮手http://materializecss.com/helpers.html
The first one ist for vertial align.
第一个用于垂直对齐。
回答by LSKhan
Text Align
文字对齐
These classes are for horizontally aligning content: .left-align, .right-alignand .center-align.
这些类用于水平对齐内容：.left-align、.right-align和.center-align。
left-align:This should be left aligned
左对齐：这应该左对齐
right-align:This should be right aligned
右对齐：这应该是右对齐的
center-align:This should be center aligned
center-align：这应该居中对齐
<div><h5 class="left-align">This should be left aligned</h5></div>
<div><h5 class="right-align">This should be right aligned</h5></div>
<div><h5 class="center-align">This should be center aligned</h5></div>
<div><h5 class="left-align">This should be left aligned</h5></div>
<div><h5 class="right-align">This should be right aligned</h5></div>
<div><h5 class="center-align">This should be center aligned</h5></div>
回答by Hitnux
display: inline-block;
vertical-align: middle;
回答by Janis Jansen
You could try to add an CSS property to the infoboxDiv, or the card div:
您可以尝试向infoboxDiv 或卡片 div添加 CSS 属性：
vertical-align: middle;
Or maybe just add Padding-top
或者也许只是添加 Padding-top
This both is not materializecss, but I think materialize don't have a feature for vertical align at all.
这两者都不是 materializecss，但我认为 materialize 根本没有垂直对齐的功能。
//EDIT
//编辑
I was wrong. There is a Materialize way, just add the class valign-wrapperto the main Div here.
For headings you can use valign.
我错了。有一个Materialize方式，只需将类添加valign-wrapper到这里的主Div即可。对于标题，您可以使用valign.
