如何在大 div 中居中更多 div答案

【问题标题】：How to center more divs inside a big div如何在大 div 中居中更多 div
【发布时间】：2021-06-01 18:11:12
【问题描述】：

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

我想做这样的事情：

所有东西都应该水平居中对齐。

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

我尝试玩定位，但在我尝试将孩子的孩子放入之前，它一直在使用绝对和相对的东西。

谁能帮帮我？

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

非常感谢！

【问题讨论】：

请向我们展示您的代码
Why is “Can someone help me?” not an actual question?
freecodecamp.org/news/css-positioning-and-flexbox-explained 你可以查看这个网址。请尝试使用 flexbox。
使用 'flex' 。让每个容器都显示灵活。
这是我目前的代码：codepen.io/arberto99/pen/mdWpXwb

标签： html css css-position

【解决方案1】：

我不知道是真是假，但如果你愿意，你仍然可以参考它：

<!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>

【讨论】：

【解决方案2】：

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

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>

【讨论】：

看起来不错，但是当我向可扩展 div 添加一些长内容时，内容会像这样：codepen.io/arberto99/pen/GRWyQLq
是的，以解决您可以添加一些最大高度和溢出作为滚动的问题。这样您就可以看到相同的滚动条