如何在大 div 中居中放置更多 div

Question

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

我想做这样的事情：

所有内容都应水平居中对齐。

而紫色div有一些外部内容，所以它的高度不固定，我需要它留在红色div里面（显然如果内容是可以滚动的太多了，但是卷轴应该是灰色的 div，而不是红色的框架。

我试着玩定位，但在我尝试将 child 的 child 放在 child.

之前，绝对和相对的东西一直有效

谁能帮帮我？

如果你没有心情为我写代码，你甚至可以 link 给我一个有用的教程，因为我找到了很多 parent-child 定位的帮助，但没有对于 parent-child-grandchild 情况...

非常感谢！

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>

Answer 2

不知道是不是真的，大家可以参考一下:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
* {
box-sizing:border-box;
}
#container {
width: 98%;
margin-left:1%;
margin-top:1%;
border: 5px solid grey;
}
#main {
border: 5px solid red;
width:580px;
margin: 0 auto;
margin-top:50px;
margin-bottom:50px;
}
#logo {
border: 5px solid green;
width:400px;
margin: 0 auto;
margin-top:20px;
}
#grid {
border: 5px solid blue;
width:540px;
margin: 0 auto;
margin-top:20px;
}
#content {
border: 5px solid purple;
width:400px;
margin: 0 auto;
margin-top:20px;
margin-bottom:20px;
}
</style>
</head>
<body>
<div id="container">
<div id="main">
<div id="logo">Logo</div>
<div id="grid">Grid</div>
<div id="content">
<h3>HELLO</h3>
<h3>HELLO</h3>
<h3>HELLO</h3>
<h3>HELLO</h3>
<h3>HELLO</h3>
<h3>HELLO</h3>
<h3>HELLO</h3>
<h3>HELLO</h3>
<h3>HELLO</h3>
<h3>HELLO</h3>
<h3>HELLO</h3>
<h3>HELLO</h3>
</div>
</div>
</div>
</body>
</html>

如何在大 div 中居中放置更多 div

How to center more divs inside a big div

html

css

css-position