html - 带定位的 CSS Flexbox 居中项目

Question

我正在尝试使用 flexbox 将 3 个元素定位在特定位置，同时水平和垂直居中。

像这样：

这就是我到目前为止所拥有的，我在这里做错了什么？

.container {
  width: 100%;
  max-width: 800px;
  height: auto;
  margin: 0 auto;
  background: pink;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;

  .first 	{ 
    background: green; 
    height: 50px;
    align-self: stretch;
  }

  .second { 
    background: blue; 
    height: 100px;
  }

  .third 	{ 
    background: crimson; 
    height: 100px;
  }
}

<div class="container">
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
</div>

    

看看这个小提琴：https ://jsfiddle.net/u21uqs7q/

Answer 1

只需使用以下代码段更新您的代码..

.container {
	width: 100%;
	max-width: 800px;
	height: 100vh;
	margin: 0 auto;
	background: pink;
	display: flex;
  align-items: center;
  justify-content: center;
	
}
	.left  .first	{ 
		background: green; 
		height: 50px;
	}
	
	.right .second { 
		background: blue; 
		height: 100px;
	}
	
	.right .third 	{ 
		background: crimson; 
		height: 100px;
	}

<div class="container">
	<div class="left">
  <div class="first">111</div>
  </div>
  
	<div class="right">
  <div class="second">222</div>
	<div class="third">333</div>
  </div> 
</div>