html - 如何在屏幕上水平和垂直居中大小未知的 DIV

Question

我需要将一个 DIV 居中放置在屏幕中心，无论是水平还是垂直，我不知道 DIV 的大小，而 div 是 position:fixed;。

这个负边距技巧不起作用，因为我不知道 div 大小。 顶部:50%；左:50%；魔法顶部:-100；左边距:-100;

margin-left: auto; margin-right: auto; 不起作用，因为不适用于 position:fixed; 和 margin-top:auto; margin-bottom:auto; 也不垂直居中;

我发现这个方法:display: table-cell; vertical-align: middle; 不工作以太;

我知道如何使用 JavaScript 使用 getComputedStyle 来获取 div 内容大小，并进行数学计算以固定它的位置，但我想要一个纯 CSS 解决方案，因为我不想每次都触发 JS div内容变化。

Answer 1

借助 CSS 表格，您可以将高度未知的框垂直居中。盒子的高度由它的内容决定。看这个demo对框使用 position: fixed 属性。框的宽度也已设置。

这是 IE <= 7 的解决方法:

#table {
  height:100%;
  text-align:center;
  white-space: nowrap;
}
#container {
  display: inline;
  zoom: 1;
  text-align: left;
  vertical-align: middle;
}
#IEcenter {
  height: 100%;
  width: 1px;
  display: inline;
  zoom: 1;
  vertical-align: middle;
}
#container * {
  white-space: normal;
}

这是否符合您的要求？