你是不是经常盯着电脑屏幕抓狂：明明设置了宽度和高度，那个该死的div就是不肯垂直居中？别慌，这问题十个前端九个栽过跟头，今天咱们就把这层窗户纸彻底捅破！
（这里停顿两秒）哎，先说个实话吧，我刚学CSS那会儿，为了垂直居中这事儿差点把键盘砸了。那时候网上教程要么讲得云里雾里，要么代码复杂得要命。不过现在摸爬滚打久了，发现其实只要掌握几个关键套路…
方法一：用Flexbox一招制敌 现在最主流的解决方案非Flex布局莫属。给父元素加上这三行代码试试看： css .parent { display: flex; align-items: center; justify-content: center; } 这时候子元素会自动变成弹性项目，垂直水平都给你摆得端端正正。不过要注意浏览器兼容性，IE10以下的老古董可能不买账。
方法二：绝对定位的老办法 虽然有点old school，但绝对定位在需要精确控制时依然好用。记住这个固定公式： css .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 这个方法的精髓在于先用top/left把元素左上角定位到中间点，再用transform往回拉半个身位。但有个坑——父元素必须设置非static的定位属性！
方法三：表格布局的遗珠 没想到吧？display:table这招在响应式布局里依然能打： css .parent { display: table; width: 100%; } .child { display: table-cell; vertical-align: middle; } 这方法特别适合不知道父元素高度的场景，而且兼容性出奇的好。不过现在年轻人可能更爱用Flex或Grid了。
方法四：Grid布局的新贵 要说最简洁的现代方案，CSS Grid当仁不让： css .parent { display: grid; place-items: center; } 就两行代码！不过要注意Grid在复杂布局中的嵌套问题，简单场景用这个真是爽到飞起。
常见翻车现场答疑
Q：为什么我的vertical-align不生效？
A：这个属性只在行内元素或表格单元格里有效，用在div上等于对牛弹琴。Q：父元素高度不确定怎么办？
这时候Flexbox的align-items:center就派上用场了，或者用padding大法上下均匀分配空间。Q：移动端适配要注意啥？
重点检查视窗单位vh的使用，有时候得配合calc()函数做动态计算，别忘了加上-webkit前缀保平安。小编观点：说实在的，现在项目里无脑用Flexbox准没错。但要是维护老项目碰到IE，还是得老老实实用绝对定位那套。对了，最近发现个骚操作——用伪元素当占位符实现垂直居中，你们有空可以试试看，保准让同事直呼内行！
本站文章由SEO技术博客撰稿人原创，作者:阿君创作，如若转载请注明原文及出处：https://www.ainiseo.com/hosting/28853.html
