我是网页设计的新手，有一个关于居中和高度的问题，希望有人能回答。
我正在尝试使用 CSS 将一个框居中放置在一个框中。我以前在另一个页面上使用过 CSS 代码片段(“这部分”评论之间的部分，见下文)并假设我必须将它放在#outer #inner{ 部分下，因为内框是我想要居中的部分.这没有用，所以我随机将它放在#outer 部分并且它起作用了。我不确定为什么，希望有人能向我解释原因:)
此外，目前我的页面上有一张背景图片和 2 个框，当我缩小页面时，所有内容也会缩小。我认为这是因为一切都是百分比。当我最小化屏幕时，我将如何做到这一点，一切都留在原地并出现滚动条？我很难在这个网站上找到另一个类似的问题。
请尽可能回答，我们将不胜感激!非常感谢:)
html{
height: 97%;
}
body{
background-image: url("Pic.png");
background-size: cover;
height: 100%;
}
#outer{
border-style: solid;
border-color: green;
height: 99%;
width: 40%;
/*THIS PART: START*/
display: flex;
flex-flow: column wrap;
align-items: center;
justify-content: center;
/*THIS PART: END*/
}
#outer #inner{
position: relative;
background-color: red;
height: 30%;
width: 50%;
/*Why doesn't the code from above in #outer go here?*/
}<!DOCTYPE html>
<html>
<head>
<title>Welcome!</title>
<link href = "intro.css" type = "text/css" rel = "stylesheet">
</head>
<body>
<div id = "outer">
<h1>Outer</h1>
<div id = "inner">
<h1>Inner</h1>
</div>
</div>
</body>
</html>最佳答案
要开始使用Flexbox 模型，您需要先定义一个 flex 容器。
flex-wrap 属性指定 flex 元素
应该换行还是不换行。
注意:应用于容器的属性会应用于其元素的 View 。
供引用: https://www.w3schools.com/css/css3_flexbox.asp
对于收缩问题的情况，使用px或vh/vw
关于html - 解释在一个盒子中居中一个盒子和调整窗口大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54059280/