按特定项目居中 div

Question

是否可以不将整个子容器 div 居中，而是通过特定项目居中。 第一个p和最后一个p的内容高度不同，可以动态变化。

 .container { display:flex; align-items: center; height: 300px; background-color: red; }.child-container { display: flex; flex-direction: column; justify-content: space-evenly; background-color: purple; }.big{ line-height:40px; }.bigger{ line-height:80px; }

 <div class="container"> <div class="child-container"> <p class="big">Lorem ipsum</p> <p>Center this</p> <p class="bigger">Lorem ipsum</p> </div> </div>

Answer 1

给子容器一个 position 的 relative 和 center paragraph absolute。 然后给中心段落一个 margin top 和 bottom 50vh：

 .container { display:flex; align-items: center; height: 300px; background-color: red; }.child-container { display: flex; flex-direction: column; justify-content: space-evenly; background-color: purple; position: relative; }.big{ line-height:40px; }.bigger{ line-height:80px; }.center { position: absolute; margin-top: 50vh; margin-bottom: 50vh; }

 <div class="container"> <div class="child-container"> <p class="big">Lorem ipsum</p> <p class="center">Center this</p> <p class="bigger">Lorem ipsum</p> </div> </div>

Answer 2

假设你的意思是水平居中，你只需要用 flex-grow 扩展子容器并在你选择的孩子上使用 align-self ：

 .container { display: flex; align-items: center; height: 300px; background-color: red; }.child-container { display: flex; flex-direction: column; justify-content: space-evenly; background-color: purple; flex-grow: 1; align-items: flex-start; }.child-container * { background-color: greenyellow; }.big { line-height: 40px; }.bigger { line-height: 80px; }.center { align-self: center; }

 <div class="container"> <div class="child-container"> <p class="big">Lorem ipsum</p> <p class="center">Center this</p> <p class="bigger">Lorem ipsum</p> </div> </div>