需求如图：要求数据垂直居中，与左侧饼图垂直方向上居中对齐；

代码如下：

<div class="parent-box" style="overflow:auto"> <div class="children-box"> //内部数据，每一条数据高度固定，假设每条height=40px; <div style="height:40px">数据1</div> <div style="height:40px">数据2</div> <div style="height:40px">数据3</div> <div style="height:40px">数据4</div> <div style="height:40px">数据5</div> </div> </div>

?CSS如下：

.parent-box{ height:100%; } .children-box{ height:100%; display:flex; flex-direction:column; justify-content:center; }

这样的代码小屏时就发现有个问题，高度不够是会出现滚轴的，但是始终滚不到顶部，看不到上边溢出的部分；因为是flex的垂直居中布局，只会滚动下方溢出的部分，上方溢出部分是看不到的；所以再给children-box加个最小高度限制，让他必定能包住所有数据高度；

给children-box加一条：min-height:200px;(5条数据，每条高度40px）

这样就不会再有显示不全的问题了；

这种布局，要注意两个地方：

1.数据外得有两层，要在parent-box里滚动数据，children-box来限制数据布局；

2.children-box的高度设置：height:100%;min-height:200px;

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。