电商网站开发公司杭州模板网会员
前端工程师必看：7种CSS垂直居中方案大比拼（附真实代码）
今天咱们聊聊前端开发中最让人头疼的问题之一——垂直居中。不知道你们有没有遇到过这种情况：明明设置了margin: 0 auto水平居中了，垂直方向怎么折腾都不对劲。全栈老李当年刚入行时，为了一个div居中能折腾一晚上，现在想想真是血泪史啊。
为什么垂直居中这么难？
浏览器对垂直方向的处理天生就比较"懒"。水平居中简单是因为块级元素默认宽度100%，我们只需要控制内容宽度和左右外边距就行。但垂直方向呢？父元素高度往往由内容撑开，子元素高度也不固定，这就导致了各种玄学问题。
不过别担心，全栈老李这就带你们解锁CSS垂直居中的七种姿势，从石器时代到现代方案一网打尽！
方案1：绝对定位 + 负边距（传统艺能）
.parent {position: relative;height: 300px; /* 必须指定高度，全栈老李提醒 */
}.child {position: absolute;top: 50%;left: 50%;width: 100px;height: 100px;margin-top: -50px; /* 高度的一半，全栈老李标注 */margin-left: -50px;
}
这是最古老的方案，兼容性极好，但有两个致命缺点：
- 必须知道子元素具体尺寸
- 修改尺寸时需要同步调整负边距
适合场景：固定尺寸的弹窗居中，兼容IE8等老浏览器时使用。