Question

在屏幕中间对齐语义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>

Answer 1

这适用于任何div或屏幕尺寸：

＆＃13;

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}

＆＃13;

 <html>
 <head>
 </head>
 <body>
 <div class="center-screen">
 I'm in the center
 </div>
 </body>
 </html>

＆＃13;

查看有关flex here的详细信息。这适用于大多数浏览器，请参阅兼容性矩阵here。

Answer 2

水平和垂直对齐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;
}

FIDDLE

Answer 3

2018：CSS3

import re
dates = []
with open("internet.test","r") as content_file:
    for line in content_file:
        m = re.search('^\w{3}\s\d{2}\s\d{2}:\d{2}:\d{2}',line)
        dates.append(m.group(0))

dates = 
['Jun 15 16:26:33', 'Jun 15 16:27:13', 'Jun 15 16:27:45']

这甚至更短。有关详细信息，请参阅：CSS: Centering Things

Answer 4

试试这个：

 div{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
    background: red;
}

这里的div是html标签。你写了一个html标签后跟一个错误的点。只写一个类后跟点。

Answer 5

您使用.div代替div

，您的代码是正确的

<强> HTML

<div class="ui grid container">
<div class="ui center aligned three column grid">
  <div class="column">
  </div>
  <div class="column">
    </div>
  </div>

<强> CSS

div{
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100px;
}

查看 Fiddle

屏幕中间的中心div

5 个答案: