这是一个超详细的 CSS 实现居中定位弹窗效果源码解析，如果看完这篇文章还没学明白，小编劝你趁年轻赶紧改行！

弹窗一般有两种情况：

弹窗的尺寸是已知的（宽高都是固定的）；弹窗尺寸是未知的（内容不固定，弹窗高度随内容改变）；

本篇文章会对这两种情况，各给出2种解决方法。每一种方法的实现源码解释都超详细！！

一、固定尺寸弹窗

方案一（定位+外边距取反）：

方案二（定位+外边距 auto）：

二、非固定尺寸弹窗

非固定尺寸的弹窗的实现办法都是需要先实现一个可以让直接子元素居中的容器

方案一（行高+行块元素）：

方案二（flex）：

随着CSS版本的更新，现代浏览器的兼容越来越好。flex的出现使得原来的痛点都得到了解决，小编也有3年时间没有做过兼容IE8的项目了。在条件允许的情况下，推荐大家使用 flex 的方式，简单又通用！

最后，希望大家不要写出下面示例的CSS代码。拿个动画属性写布局，只能说NB！

作者：黄河爱浪

本文原创，著作权归作者所有，转载请注明原链接及出处