Question

当没有祖先指定高度时，我需要使div垂直居中。

当div的高度<窗口高度，但是当它更大时，我的解决方案就起作用了，并且我设置了溢出功能以允许滚动，由于某些原因，上半部分被切掉了...

有什么想法吗？

.parent {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
}
.child {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  text-align: center;
  overflow: auto;
}
.content_div>div {
  border: 1px black solid;
  padding: 20px;
  display: inline-block;
}

Answer 1

这是“出于某种原因” ：

在大多数情况下，当向右或向右溢出时，用户希望通过滚动仍然可以访问溢出的内容。
在大多数情况下，当向左或向上溢出时，用户希望溢出的内容被隐藏（并且无法通过滚动访问）。

例如，如果您给出顶部菜单栏：

position:relative;
top: -100px;

您不希望浏览器允许用户滚动到该页面（因为页面的padding-top值为100px）。

此类问题的一般解决方法是通过相应增加父级或限制其内容的大小来防止居中内容超出父级。

当没有祖先指定高度时，垂直居中div

1 个答案: