使用 CSS3 transform 实现弹窗绝对居中

WPJAM Basic 在后台使用 Thickbox 实现弹窗效果的，Thickbox 基于 jQuery，虽然很古老，最后一次更新已经是 2014 年了，但是一直非常好用，所以我在各种 WordPress 后台的各种弹窗都是使用 Thickbox 实现的。

Thickbox 弹窗绝对居中的问题

但是 Thickbox 的弹窗有个问题，为了实现弹窗在页面中绝对居中，需要预先定义弹窗的高度，这是因为 Thickbox 弹窗居中是基于其宽度和高度来计算的，所以需要预先知道弹窗的高度，比如 700×800 的弹窗，最后的样式是这样的：

#TB_Window{
	position : fixed;
	left : 50%;
	top : 50%;
	width : 700px;
	height : 800px;
	margin-left : -350px; /*一半的高度*/
	margin-top : -400px;  /*一半的宽度*/
}

为了绝对居中，首先通过 left:50%; 和 top: 50%; 将弹窗的左上角设置为屏幕的正中间，然后在要设置弹窗的 margin-left 和 margin-top 为宽度和高度的一半的负值，意思反向移动弹窗的一半，这样刚好居中。

这样每次弹窗的高度变化，都需要重新设置 height 和 margin-left 属性，这样就需要动态去计算，但是有时候弹窗里面还有图片，它的高度也是无法实时获取，这样计算的过程变得异常的麻烦，我为了实现效果，写了几百行的 JS 代码，脑阔都疼了。

使用 CSS3 transform 实现绝对居中

哈哈，我写了几百行的 JS 代码实现了弹窗绝对居中，为了实现含有图片的弹窗也能撑开，我加了一秒的演示，还做了动画，总之自己觉得自己都棒棒哒，作为一个后端程序员，感觉自己 jQuery 代码写的 666。

于是我拿去给前端的大神谍总显摆演示，他看了一眼，说用 CSS 几行就能搞定，真的是猛汉流泪。

CSS3 新增了 transform 2D/3D 转换的属性，我们无需知道弹窗的宽度和高度就能实现绝对居中，那么我们只需要定义一下弹窗的最大宽度和高度，具体的高度和高度通过内部元素自己撑开。

#TB_Window{
	position : fixed;
	left : 50%;
	top : 50%;
	max-width : 700px;
	max-height : 800px;
	transform: translate(-50%, -50%);
}

最后的效果：

推荐阅读：

在 WordPress 后台使用 ThickBox 制作弹出层

WordPress 5.8 将内置 WebP 图片格式支持

WPJAM「文章隐藏」：设置文章在列表中隐藏的插件，并可根据不同平台设置不同的隐藏文章