在屏幕视图中使绝对定位的div居中显示

Question

我想把一个绝对定位的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;   
}

- asker

Answer 1

使用以下CSS：

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

- mimic

---

到目前为止，这是最优雅的解决方案..适用于所有大小和比例的盒子，无需定制。它是否跨浏览器兼容？ - Gautam

这会对元素的大小和其中的内容产生奇怪的影响。例如，如果没有left:50%，元素将占用所需的宽度空间，但是使用left:50%，它会神奇地变大，并将内容分成多行。 - mjs

还建议添加一个z-index:20(或任何大于1的值)以确保它显示在屏幕上其他内容的上方。 - Jeremy Moritz

Answer 2

将position:absolute更改为position:fixed，然后你就可以继续了！

当您使用position - absolute时，参考div是具有position - relative的父div。但是，如果您使用position - fixed，则参考是浏览器窗口，这正是您在此情况下需要的。

对于IE6，我想您必须使用CSS表达式。

- Kasturi

---

除了IE6和移动浏览器。 - mercator

它必须在所有浏览器中工作，JavaScript解决方案被接受。 - asker

您不必过于担心IE6，它已经被认为已经死亡很久了。 - Kasturi

请查看@13209dy提供的简单而有效的解决方案。到目前为止，我还没有找到更好的解决方案。 - Gautam

Answer 3

如果你不想将你的元素位置改为 fixed，这里提供一种使用 absolute 位置的解决方案。

由于所有浏览器现在都支持 CSS 的 calc()，这里提供了一种使用 calc() 的解决方案。

#main {
    width: 140px;
    height:100px;
    border: 1px solid Black;
    text-align: left;
    position: absolute;
    top: calc(50vh - (/* height */100px / 2));
    left: calc(50vw - (/* width */140px / 2)); 
}

- Basic Coder

---

不知道这个，但正是我在这种情况下所需要的 - @Robert Hahn 的好建议。 - kyleturner

非常适合当您仍需要绝对定位元素。太棒了！ - Drazen Bjelovuk

有人能解释一下计算是如何实现 OP 所要求的吗？非常好的解决方案。 - Kode_12

Answer 4

下面是一种使用 margin 和 position: fixed 的解决方案：

#main{
    width: 140px;
    height:100px;
    border: 1px solid black;

    /* Centering #main on the screen */
    position: fixed;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

它通过增加所有边缘的margin来居中div以适应整个屏幕。

编辑：我发现top，right，bottom，left有一个简写，即inset。它已在主流浏览器中实现，并且您可以在其他浏览器此处查看其兼容性。

因此，要绝对居中一个

在屏幕上：

#main{
    width: 140px;
    height:100px;
    border: 1px solid black;

    /* Centering #main on the screen */
    position: fixed;
    margin: auto;
    inset: 0;
}

- Ashish Binu

---

对我来说工作得很好。谢谢。 - Ajay

Answer 5

更加复杂的方法是使用多个外部盒子。这种方法可以在有或没有中间盒子的硬编码宽度/高度的情况下很好地工作（添加背景颜色只是为了显示每个盒子的作用）：

/* content of this box will be centered horizontally */
.boxH
{
  background-color: rgba(0, 127, 255, 0.2);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* content of this box will be centered vertically */
.boxV
{
  background-color: rgba(255, 0, 0, 0.2);
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* content of this box will be centered horizontally and vertically */
 .boxM
{
  background-color: lightblue;
  padding: 3em;
}

<div>
  some text in the background
</div>
<div class="boxH">
  <div class="boxV">
    <div class="boxM">
      this div is in the middle
    </div>
  </div>
</div>

如果您想让div无论滚动位置如何都显示在中间，则将position更改为fixed。

https://jsfiddle.net/vanowm/7cj1775e/

- vanowm

Answer 6

使用绝对定位。

CSS中：

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

在tailwindcss中：

<div class="absolute top-1/2 left-1/2 -mr-[-50%] w-[140px] h-[100px] -translate-y-1/2 -translate-x-1/2"></div>

- Aga

Answer 7

我成功地使用以下方法将绝对定位的文本置于中心：

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

这是 Kenneth Bregat 答案的一个变体。它保持了绝对定位而不是固定定位，同时解决了一些答案中提到的文本换行问题。不要忘记父元素需要相对定位。

- Savage

Answer 8

这个技巧怎么样：

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

- Kenneth Bregat

Answer 9

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

在 CodePen 上的示例

- pietervdd

---

你给出的答案已经是提问者问题的一部分了。请检查一下。 - otherDewi