Html 将绝对div定位在屏幕视图的中心

我想将div放置在屏幕视图的中心位置（滚动或不滚动）

我有这个，但是它把div放在文档的中间，而不是当前视图的中间

#main {
    width: 140px;
    height:100px;
    border: 1px solid Black;
    text-align: left;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left:-70px;
    margin-top:-50px;   
}

---

将

位置：绝对

更改为

位置：固定

，您应该可以出发了

当您说position-absolute时，reference div是具有位置相对的父div。但是，如果您说位置固定，则参考是浏览器的窗口。这就是你想要的

在IE6的情况下，我想你必须使用CSS表达式

margin-left: -half_of_the_div;
left: 50%;
position: fixed;

---

如果您不想将元素的位置更改为“固定”，这里有一个解决方案，可以使元素保持绝对值

由于现在所有浏览器都支持CSS的

calc（）

，因此这里提供了一个使用

calc（）

的解决方案

使用以下CSS：

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

---

更复杂的方法是使用多个外框。此方法适用于中间框的硬编码宽度/高度（添加背景色只是为了显示每个框的功能）：

/*此框的内容将水平居中*/
.boxH
{
背景色：rgba（0，127，255，0.2）；
宽度：100%；
身高：100%；
位置：绝对位置；
排名：0；
左：0；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
}
/*此框的内容将垂直居中*/
博克斯先生
{
背景色：rgba（255,0,0,0.2）；
身高：100%；
显示器：flex；
弯曲方向：行；
对齐项目：居中；
}
/*此框的内容将水平和垂直居中*/
博克斯先生
{
背景颜色：浅蓝色；
填充：3em；
}

背景中的一些文本
这个div在中间。

这个技巧怎么样：

position: absolute;
height:200px;
top: 0;
left: 1%;
right: 1%;

---

我成功地将绝对定位的文本放置在中心，如下所示：

position: absolute;
text-align: center;
left: 1%;
right: 1%;

---

这是Kenneth Bregat答案的变体。它保持了

绝对

定位，而不是

固定

，并且解决了一些答案中提到的文本包装问题。不要忘记，家长需要相对定位。

这里有一个解决方案，使用

边距和
位置：固定：

#主{
宽度：140px；
高度：100px；
边框：1px纯黑；
/*在屏幕上对中#主*/
位置：固定；
保证金：自动；
排名：0；
右：0；
底部：0；
左：0；
}

它通过增加所有侧面的
边距来居中
div
，以适应整个屏幕

编辑：我发现有一个
top、right、bottom、left
的缩写，即
inset
。它已经在主要浏览器中实现，您可以在其他浏览器上看到兼容性

因此，要使div在屏幕上绝对居中：

#主{
宽度：140px；
高度：100px；
边框：1px纯黑；
/*在屏幕上对中#主*/
位置：固定；
保证金：自动；
插图：0；
}
除了在IE6和移动浏览器中。它必须在所有浏览器中工作，javascript解决方案是可以接受的。我们不必太担心IE6。。。它被认为已经死了很长一段时间了，现在检查下面@13209dy的简单和最有效的解决方案。。找不到更好的解决方案，所以您给出的答案已经是提问者问题的一部分。检查一下。我没有意识到这一点，这正是我在这个案例中需要的——非常好的建议@Robert Hahn。非常适合你仍然需要绝对元素的时候。真棒的回答！有人能解释一下计算是如何达到OP的要求的吗。很好的解决方案，迄今为止最优雅的解决方案。。适用于所有尺寸和比例的箱子，无需定制。它是跨浏览器兼容的吗？这对元素的大小和其中的内容有很大的影响。例如，如果没有left:50%，元素将占据所需的宽度空间，但如果left:50%，元素将神奇地获得一个大小，并将内容分成多行。
position: absolute;
text-align: center;
left: 1%;
right: 1%;