How can I center my two blue boxes here?

This question already has an answer here:

Flexbox: center horizontally and vertically 8 answers

---

I added to the "First" Class display:flex align-items: center; Then margin for the boxes

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>

---

Use the display: flex and justify-content: center on the element containing the blue boxes. Justify content centers the elements inside it, if you use it in the blue box it will center content inside the blue box, if any.

链接地址: http://www.djcxy.com/p/76024.html

上一篇: 保证金CSS属性，但它不存在。 我怎么能伪造它？

下一篇: 我怎样才能将我的两个蓝色框放在这里？