CSS 屏幕中间的中心 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31217268/
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
Center div on the middle of screen
提问by carloss medranoo
What is the best pattern to align a semantic ui grid in the middle of the screen?
在屏幕中间对齐语义 ui 网格的最佳模式是什么？
the css for this will ideal be this one.
理想的CSS就是这个。
.div{
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100px;
}
But on semantic this dont look well with grids.
但是在语义上，这与网格看起来不太好。
This is part of my html.
这是我的 html 的一部分。
<div class="ui grid container">
<div class="ui center aligned three column grid">
<div class="column">
</div>
<div class="column">
</div>
</div>
</div>
回答by Caner
This should work with any divor screen size:
这应该适用于任何div屏幕尺寸：
.center-screen {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
} <html>
<head>
</head>
<body>
<div class="center-screen">
I'm in the center
</div>
</body>
</html>See more details about flexhere. This should work on most of the browsers, see compatibility matrix here.
请参阅有关flex此处的更多详细信息。这应该适用于大多数浏览器，请参阅此处的兼容性矩阵。
Update: If you don't want the scroll bar, make min-heightsmaller, for example min-height: 95vh;
更新：如果您不想要滚动条，请min-height缩小，例如min-height: 95vh;
回答by Nixen85
2018: CSS3
2018 年：CSS3
div{
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
This is even shorter. For more information see this: CSS: Centering Things
这甚至更短。有关更多信息，请参阅：CSS：居中事物
回答by Hemal
回答by Abdus Sattar Bhuiyan
Try this:
尝试这个：
div{
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100px;
background: red;
}
Here div is html tag. You wrote a html tag followed by a dot that is wrong.Only a class is written followed by dot.
这里 div 是 html 标签。你写了一个html标签后跟一个点是错误的。只写了一个类后跟一个点。
回答by Malik Naik
Your code is correct you just used .divinstead of div
您的代码是正确的，您只是使用.div而不是div
HTML
HTML
<div class="ui grid container">
<div class="ui center aligned three column grid">
<div class="column">
</div>
<div class="column">
</div>
</div>
CSS
CSS
div{
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100px;
}
Check out this Fiddle
看看这个小提琴
