这是笔者最近面试遇到的一个“刁钻”问题。所谓棘手的问题，就是因为如果不经常写CSS，肯定会忘掉，手把手的学。笔者只提了最常见最简单的Flex，面试官却继续追问。本以为凭着记忆写点什么，结果还是无奈。..话不多说，下面进入干货。CSS垂直居中的方式，这里我以父元素嵌套子元素的形式展开：当子元素的宽高已知时：absolute+margin:auto.parent{width:500px;高度：500px；边框：1px实心#ccc；位置：相对；}.children{宽度：300px；高度：300px；背景颜色：红色；位置：绝对；顶部：0；右：0；底部：0；左：0；margin:auto;}absolute+-margin:.parent{/*同上框*/}.children{width:300px;高度：300px；背景颜色：红色；位置：绝对；顶部：50%；左：50%；保证金-top:-150px;margin-left:-150px;}子元素宽高未知时：flexlayout:.parent{display:flex;证明内容：居中；align-item:center;}absolute+transform:.parent{position:relative;/*宽高同上方框，这里不再设置*/}.children{position:absolute;顶部：50%；左：50%；变换：翻译（-50%，-50%）；}
