平时需要‘子元素个数不定的垂直居中’的场景应该不少见吧，像下面这样的效果：
直接上代码：
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>demo</title><style type="text/css">/* table-cell方案，完美兼容ie8，考虑ie8的同学可以用 */.article{width:600px;height:400px;border:1px orange solid;display: table-cell;; /*最外面层display：table-cell*/vertical-align: middle;}.child{vertical-align: middle;width: 80%; height: 50px; margin: 10px auto;background: pink;}/* flex方案，但是不兼容ie8，移动端放心使用(还是要自己看) */.flex-article {display: flex;flex-direction: column;justify-content: center;align-items: center;width:600px;height:400px;border:1px orange solid;}.flex-child {width: 80%;height: 50px;margin: 10px 0;background: pink;}</style></head><body>方案一：<div class="article"><div class="child">1</div><div class="child">2</div><div class="child">3</div><div class="child">4</div></div>方案二：<div class="flex-article"><div class="flex-child">1</div><div class="flex-child">2</div><div class="flex-child">3</div><div class="flex-child">4</div></div></body></html>
![[CSS] 子元素垂直居中的两种方式](https://1200zi.500zi.com/uploadfile/img/14/594/4bf81c25d3dd4eeeb588ad0cc4ae2a49.jpg)
