car*_*noo 34 css css3 semantic-ui
在屏幕中间对齐语义ui网格的最佳模式是什么？
这个css理想的是这个.
.div{
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100px;
}
但是在语义上,这与网格看起来不太好.
这是我的HTML的一部分.
<div class="ui grid container">
<div class="ui center aligned three column grid">
<div class="column">
</div>
<div class="column">
</div>
</div>
</div>
Can*_*ner 63
这适用于任何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>flex 在这里查看更多详情.这应该适用于大多数浏览器,请参阅此处的兼容性矩阵.
Hem*_*mal 21
在水平和垂直方向上对齐div的最佳方法是
HTML
<div></div>
CSS:
div {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100px;
height: 100px;
background-color: blue;
}
Nix*_*n85 19
2018年:CSS3
div{
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
这甚至更短.有关更多信息,请参阅:CSS:居中事物
尝试这个：
div{
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100px;
background: red;
}
这里的div是html标签。你写了一个html标签，后面跟着一个点，这是错误的。只写了一个类，后面跟着点。