Question

我对网页设计还比较陌生，我想问一个关于居中和高度的问题，希望有人能回答。

我正在尝试使用CSS将框放在框的中央。我以前在另一页上使用过CSS代码段（“ THIS PART”注释之间的部分，请参见下文），并假定我必须将其放在#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>

Answer 1

要开始使用 Flexbox模型，您需要先定义一个 柔性容器。
flex-wrap 属性指定是否 flex项
应该换行。

注意：应用于容器的属性将应用于其项目的视图。

供参考： https://www.w3schools.com/css/css3_flexbox.asp

对于缩小问题，请使用px或vh / vw

供参考：https://www.youtube.com/watch?v=__KNqdpqji0

Answer 2

之所以有效，是因为该部分

display: flex;
flex-flow: column wrap;
align-items: center;
justify-content: center;

影响元素的内部而不是自身。我猜您在期望#outer #inner通过这些行使其对齐，但没有用。

对于缩小的问题，我建议使用像素或vh / vw而不是百分比

希望这可以消除您的疑问！

说明将框居中放置框并调整窗口大小

2 个答案: