在屏幕中央居中显示div

Question

在屏幕中央居中显示div

95

什么是将Semantic 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>

- carloss medranoo

您想要两列都水平和垂直居中吗？ - m4n0

1

在 CSS 中使用了 .div 而不是 div。 - Vega

5个回答

95

2018: CSS3

div {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-right: -50%;
      transform: translate(-50%, -50%);
    }

这是更短的内容。有关更多信息，请参见CSS：居中物品

- Nixen85

这对我有用，因为它使div居中，但是div中的一些元素现在变得模糊了。 - mellis481

3

甚至早在2018年，CSS3就已经存在了足够长的时间，可以在所有“现代”的浏览器上使用。一个建议是：用“position: fixed”将其居中于屏幕上，就像请求的那样。一个问题是：“margin-right: -50%”的意义是什么？在我的测试中，即使没有它，它似乎也能很好地工作。感谢你提供了一个好的答案。 - Manngo

1

这个居中是基于页面而不是基于屏幕的。如果页面长度超过屏幕高度，这将会引起问题。 - Caner

3

"margin-right: -50%"的作用是抵消"left: 50%"的影响。"left"规则会将元素可用宽度减少50%。因此，呈现器将尝试使行不超过容器宽度的一半。通过指定元素的右边距与该量相同，最大行长度再次等于容器的宽度[...]。当删除"margin-right: -50%"并调整窗口大小时，您会发现当窗口仍然是文本行两倍宽时，句子已经被分成了多行。"来源：参见上面的链接。 - Nixen85

36

<div></div>

CSS：

div {
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100px;
    height: 100px;
    background-color: blue;
}

FIDDLE

- Hemal

1

试试这个：

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

是HTML标签。你写了一个后面跟着点的HTML标签，这是错误的。只有写了一个类名后才需要加点号。

- Abdus Sattar Bhuiyan

1

您的代码是正确的，您只是使用了.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

- Malik Naik

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Caner · Accepted Answer

这应该适用于任何 div 或屏幕大小：

.center-screen {
  display: flex;
  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 的更多详细信息。这应该适用于大多数浏览器，请参阅兼容矩阵。

更新：如果您不想要滚动条，请将min-height设置为更小，例如min-height: 95vh;