嘿，朋友们，你们了解吗？当前前端人都在玩弹窗，那要怎么让它居中？别担心，我来给你们一段不一样的教程。有可能有点乱，但我保证你会学到东西。

先说说为哪些要居中

先说个背景：如果你做网站， 出现一个提示框、确认框之类的，如果它不在正中间，那用户看起来会很不舒服，或者根本看不到。于是较大家就想办法让它居中。

太扎心了。 有人说用margin auto，但那只能水平对齐，还得手动算较高度。还有人说用position absolute+top:50%+left:50% + transform，但有些老浏览器不太友良好。

被割韭菜了。 所以今天我们来聊几种最常见的方法，良好让你随时能够抄代码。

方法一：Flexbox 居中

步骤：

1. .modal-wrapper {display:flex; justify-content:center; align-items:center; position:fixed; inset:0;}
2. .modal-box {background:white; padding:20px; border-radius:4px;}
3. .modal-wrapper:hover{background:rgba;}

这样就能够把 .modal-box 放到 .modal-wrapper 的正中央啦！注意这两行代码里的 inset 是等价于 top,right,bottom,left都是 0, 能够直接覆盖整个视口。

Flexbox 在 IE10 以后基本没问题了 如果你的网站必须要兼容 IE9，那只能用其他办法，破防了...。

完整示例代码

    

        
这是一个示例弹窗
    

方法二：绝对定位 + transform

思路：

• #modal {position:absolute; top:50%; left:50%; width:400px;height:auto;background:white;padding:20px;border-radius:8px;}#modal::after{content:"";display:block;width:100%;height:auto;}#mask{position:absolute;width:100%;height:100%;top:0;background:black;background-opacity:.5;}transform:-translate;

This method is older but st 说明….. ill works on most browsers.

这里是弹窗内容， 你能够放文字、图片、按钮哪些的！ 如果你想关闭，能够点击 x 或者按 Esc 键，话虽然是这么说…。

注意点：

• - translate 的两个百分比是基于自身较宽较高的一半来回拉回去的，所以不用预先了解尺寸。
• - 如果父容器没有设置 position relative， 那么定位会基于 document body，这时有可能出现偏移问题。记住加上 parent {position:relative;} 。
• - 有时候滚动条滚动后位置会偏移， 当前这个是 Safari 的 bug，解决方案是改成 fixed 或者加上 overflow:hidden;

方法三：CSS Grid 居中

Mystery:

.grid-center {display:grid; place-items:center;height:100vh;}
.modal {padding:30px;background:#fff;border-radius10px;}
.grid-center:hover{background:black;color:white;}
.grid-center .close{position:absolute;top10px;right10px;font-size24px;}
.grid-center .content{text-align:center;margin-top20px;}
.grid-center .content p{line-height1.6;}
.grid-center .content span{color:#f00;font-weight:bold;}

   
窗头网络是整理流动

为哪些 Grid 更良好？这是因为只需要一句 display:grid 就能搞定横纵两条线交叉点的位置哦~ 超级省事~

实战案例：点击按钮弹出对话框

一下：哪种方法最适合我呢？

如果你的项目最主要面向现代化浏览器， 而且想迅速上线，那么 Flexbox 是最推荐的选项，这是因为它语法简洁、可读性较高、兼容性也很良好； 如果你需要支持老陈旧 IE9/10 那么就选绝对定位 + transform ，但记住加上 vendor prefix 和 fallback ; 如果想再走一次“极简”，Grid 能够让你的代码更较短， 何必呢？ 但目前不是全部团队都熟悉 CSS Grid，所以要根据团队技能决定； 不管选择哪种，都提议把遮罩层和弹窗内容拆成两个 div，并且为遮罩层加一个半透明黑色背景，以避免用户误操作页面其它内容； 最后再来看不要遗忘给键盘操作留空间范围，举个例子 ESC 键关闭、Tab 循环焦点等；否则较低版本浏览器上的无障碍体验会差。