Html 使用 Semantic-UI 垂直对齐 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30603780/
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
Vertical alignment of a div using Semantic-UI
提问by Michael Khait
I can't seem to find it anywhere in the docs.
我似乎无法在文档中的任何地方找到它。
Is there a way to vertically center a div on the page using Semantic-UI semantics :)
有没有办法使用语义 UI 语义在页面上垂直居中 div :)
Here is what I'm trying to do:
这是我想要做的：
<div class="ui centered grid">
<div class="eight column wide">
<div>I want to be centered vertically on a page</div>
</div>
</div>
回答by Uday Hiwarale
http://semantic-ui.com/examples/grid.html
http://semantic-ui.com/examples/grid.html
Use middle alignedclass on grid
使用middle aligned类grid
回答by Peyothe
This issue was reported HEREearly 2018 but closed.
此问题于2018 年初在此处报告，但已关闭。
However, you can try this :
但是，你可以试试这个：
<div id="my-container" class="ui grid middle aligned">
<div class="row">
<div class="column">
<div class="ui text container segment inverted">
<h1>My DIV</h1>
</div>
</div>
</div>
</div>
Make sure your container is tall enough
确保您的容器足够高
#my-container {
background: #000;
height: 100vh;
width: 100%;
}
Try it on JSFiddle : https://jsfiddle.net/Peyothe/6rjmdu1x/
在 JSFiddle 上试试：https://jsfiddle.net/Peyothe/6rjmdu1x/
回答by Simon H
I just achieved this by using middleand setting heights to certain elements:
我刚刚通过使用middle和设置某些元素的高度来实现这一点：
.holder {
height: 400px
}
.holder .middle {
height: 100%
}<link href="https://raw.githubusercontent.com/Semantic-Org/Semantic-UI/master/dist/semantic.css" rel="stylesheet" />
<div class="holder">
<div class="ui middle aligned grid">
<div class="eight column wide">
<div>I want to be centered vertically on a page</div>
</div>
</div>
</div>