在屏幕中间居中div [英] Center div on the middle of screen
本文介绍了在屏幕中间居中div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在屏幕中间对齐语义ui网格的最佳模式是什么？
What is the best pattern to align a semantic ui grid in the middle of the screen?
用于此目的的CSS最好是这个。
the css for this will ideal be this one.
.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.
这是我的html的一部分。
This is part of my html.
<div class="ui grid container">
<div class="ui center aligned three column grid">
<div class="column">
</div>
<div class="column">
</div>
</div>
</div>
推荐答案
这适用于任何 div 或屏幕尺寸：
This should work with any div or screen size:
.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>
查看有关<$ c $的详细信息c> flex 此处。这应该适用于大多数浏览器，请参见兼容性列表此处。
See more details about flex here. This should work on most of the browsers, see compatibility matrix here.
更新：如果您不想滚动条，请减小最小高度，例如最低高度：95vh；
Update: If you don't want the scroll bar, make min-height smaller, for example min-height: 95vh;
这篇关于在屏幕中间居中div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
