高度不定时，怎么实现垂直居中

今天去面试的时候，被问到css怎么实现高度不定的垂直居中，突然就懵了，之前面试的都是js相关知识，发现css的知识自己缺少总结，今天就先理一下不定高的垂直居中吧！

首先第一种：用flex布局实现不定高垂直居中：
html代码：一个父div，一个子div；

我是不定高div,需要垂直居中

我是不定高div，需要垂直居中

css代码：父div固定高度，子div根据内容自适应；
通过设置父div为flex，然后设置主抽和交叉轴方向center即可；
.p{
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
width: 600px;
height: 400px;
background-color: #1e88e5;
}
.s{
width: 300px;
background-color: #fd9927;
}
效果截图：

image.png

缺点：浏览器兼容性不好，IE10以上才能用；

第二种：position定位实现不定高垂直居中：
html代码一样，直接上css代码：
.p{
position: relative;
margin: 0 auto;
width: 600px;
height: 400px;
background-color: #1e88e5;
}
.s{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 300px;
background-color: #fd9927;
}
注意父div一定要设置relative或者fixed，不然的话会一直找其祖先元素搜索设置了relative或者fixed的div，然后根据其定位，都没有的话是根据body定位；
解释一下为啥要设置transform， 因为设置top和left为50%是按照子div的左上定点实现定位的，这样会导致子div自身的宽度和高度不在居中范围内，设置transform之后，将其自身的宽度和高度向上、左移动其自身的50%，就实现和水平和垂直居中；
效果图就不上了，太占地，老铁们可以自己敲一遍代码查看效果；
缺点：1、IE8不支持；2、transform属性需要写浏览器厂商前缀；3、可能干扰其他transform效果；4、某些情形下会出现文本或元素边界渲染模糊的现象；
目前知道这两种，还有table和table-cell布局实现垂直居中后，会导致子元素继承父元素的高度，不明白为啥，先不写了；
老铁们有好的方法可以留言。