CSS如何垂直水平居中一个DIV？

Question

我有一个弹出窗口，其中包含一个ASP.NET表单，点击“请求信息”链接即可显示该表单。

然而，具有触发弹出窗口的“请求信息”链接的页面有很多内容，因此需要滚动才能看到链接。

如果用户滚动以阅读内容，则需要始终将

居中，否则，如果他们不滚动，则弹出窗口仍将居中显示在屏幕上。

被绝对定位，整个页面宽度为960px，边距设置为0 auto。

- Filth

Answer 1

如果 div 元素有固定的宽度和高度，请使用以下代码： （如果宽度为 120 像素，高度为 80 像素）

position: fixed;
top: 50%;
left: 50%;
margin-left: -60px; /* negative half of the width */
margin-top: -40px; /* negative half of the height */

- ninov

---

这会将 div 放在右下角，而不是居中。您需要将边距设置为负数。 - Godwin

它们现在是负数... - ninov

如果您不知道盒子的宽度和高度（在95％的情况下是这种情况），那么这个答案就没有意义。 - Kir Mazur

Answer 2

使用position:fixed;，将top、left、right和bottom都设置为0，并给div添加display:table-cell;。同时，设置text-align:center;和vertical-align:middle;，这样可以使内部的所有内容都居中显示，而无需使用像素精确的hack技巧，如负边距。

- user912695

---

好的，左侧和顶部的值是多少？ - Filth

Answer 3

这是你想要做的吗？ http://jsfiddle.net/Hrwf8/

关键是将左边和顶部样式设置为50%，并将margin-left和top设置为div宽度和高度的一半的负数。当然，这需要你的div有一个固定的大小。

- Godwin

Answer 4

在你的 CSS 中：

.ClassCenter {
    position: absolute;
    left: 50%;
    top: 50%;
}

来源： http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/demo.html

- Alan

---

这只会将左上角放置在中心，盒子仍然没有居中。 - davethegr8

Answer 5

如果您的弹出 div 具有固定大小，则可以使用以下 CSS：

position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto; /* this requires a fixed size */

否则，您必须调整 display: table-cell; 等内容。

- Neil