我怎样才能将我的两个蓝盒放在这里？

Question

我想使用CSS Flexbox将下面示例中显示的两个蓝色boxex居中。我试着将它们放在两个对齐项目中心：center;并证明 - 内容：中心;但它不起作用。

感谢您的帮助。

body {
  margin: 0;
  padding: 0;
}

#container {
  width: 100%;
  height: 500px;
  background-color: green;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#first {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  display: inline-block;
  background-color: red;
}

#loadingBar {
  width: 100%;
  height: 20px;
  background-color: purple;
}

#inner {
  width: 50px;
  height: 50px;
  display: inline-block;
  background-color: blue;
}

<div id="container">
  <div id="first">
    <div id="inner"></div>
    <div id="inner"></div>
  </div>
  <div id="loadingBar"></div>
</div>

Answer 1

我添加到“第一个”类display:flex align-items: center;然后边框

body {
			margin: 0;
			padding: 0;
		}
		#container {
			width: 100%;
			height: 500px;
			background-color: green;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}
		#first {
			width: 50%;
      display: flex;
     background-color: red;
      align-items: center;
      justify-content: center;
			background-color: red;
		}
		#loadingBar {
			width: 100%;
			height: 20px;
			background-color: purple;
		}
		#inner {
    width: 50px;
    margin-left: 1%;
    margin-right: 1%;
    height: 50px;
    display: inline-block;
    background-color: blue;
		}
  

<div id="container">
		<div id="first">
			<div id="inner"></div>
      	<div id="inner"></div>
       <div id="inner"></div>
			<div id="inner"></div>
		</div>

		<div id="loadingBar"></div>
	</div>

Answer 2

在包含蓝色框的元素上使用display: flex和justify-content: center。 Justify内容将其中的元素居中，如果您在蓝色框中使用它，它会将内容置于蓝框内（如果有的话）。