Css 以未知高度居中响应div，并启用完全垂直滚动

我正试图将一个高度未知的div居中

---

当视口高度小于div高度时，我找不到允许滚动到div顶部的解决方案

HTML

---

谢谢

您无法滚动到

div

顶部的原因是带有负值的

transform

属性将

div

定位在较小的屏幕上

在此演示中，

transform

被禁用：

此外，当您将绝对定位应用于元素时，您会将其从文档中移除。这意味着它被其容器忽略。因此，

body

和

html

元素的高度为零

在本演示中，

主体有一个绿色边框（完全折叠）：


要使布局正常工作，您可以为
主体
指定一个最小高度（以便它可以随
div
一起展开），并使用绝对定位代替居中

CSS

html { height: 100%; } /* necessary for percentage heights to work */

body {
    background: grey;
    border: 10px solid green; /* for demo purposes */
    min-height: 100%; /* allow body to expand with children */
    display: flex; /* establish flex container */
    justify-content: center; /* center div horizontally, in this case */
    align-items: center; /* center div vertically, in this case */
}

p {
  background: green;
}

div {
    /* REMOVE
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); */

    box-sizing: border-box;
    max-width: 500px;
    width:100%;
    height: 700px; /* Unknown*/
    padding: 20px;  
    background: red;
    color: white;
    text-align: center;
}

演示：

请注意，所有主流浏览器都支持flexbox。
“我找不到一个解决方案，当视口高度    body {
      background: grey;
    }
    p{
      background: green;
    }
    div {
      position: absolute;
      left: 50%;
      top: 50%;
      box-sizing: border-box;
      transform: translate(-50%, -50%);
      max-width: 500px;
      width:100%;
      height: 700px; /* Unknown*/
      padding: 20px;  
      background: red;
      color: white;
      text-align: center;
    }

html { height: 100%; } /* necessary for percentage heights to work */

body {
    background: grey;
    border: 10px solid green; /* for demo purposes */
    min-height: 100%; /* allow body to expand with children */
    display: flex; /* establish flex container */
    justify-content: center; /* center div horizontally, in this case */
    align-items: center; /* center div vertically, in this case */
}

p {
  background: green;
}

div {
    /* REMOVE
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); */

    box-sizing: border-box;
    max-width: 500px;
    width:100%;
    height: 700px; /* Unknown*/
    padding: 20px;  
    background: red;
    color: white;
    text-align: center;
}