html - 如何在大 div 中居中更多 div

Question

我知道有很多教程可以帮助您将 div 居中放在另一个 div 中......但我的问题更大，到目前为止我还没有找到任何有用的解决方案。

我想做这样的事情：

一切都应该水平居中对齐。

并且紫色div有一些外部内容，所以它的高度不固定，我需要它留在红色div内（如果内容太多它显然可以滚动，但滚动应该是灰色div，不像红框中的那样）。

我试图玩定位，但绝对和相对的东西它一直在工作，直到我尝试放置孩子的孩子。

任何人都可以帮助我吗？

如果你没有心情为我写代码，你甚至可以给我一个有用的教程，因为我找到了很多关于父子定位的帮助，但对于父子孙的情况却没有......

非常感谢！

标签： htmlcsscss-position

Answer 1

我假设你正在寻找这样的东西？

https://codepen.io/akshaybhat301094/pen/MWprQvO

*{
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  width: 80%;
  height: 80%;
  border: 5px solid gray;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main {
  width: 80%;
  height: 80%;
  border: 5px solid red;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-direction: column;
  gap: 10px;
}

.logo {
  width: 60%;
  height: 80px;
  border: 5px solid green;
}

.grid {
  width: 80%;
  height: 80px;
  border: 5px solid blue;
}

.expandable {
  width: 60%;
  max-height: 120px;
  min-height: 100px;
  border: 5px solid purple;
  margin-bottom: 10px;
}

<div class="container">
  <div class="main">
    <div class="logo"></div>
    <div class="grid"></div>
    <div class="expandable"></div>
  </div>
</div>