模态框居中

前言

模态框居中这个问题很常用，网上代码也很多，但是往往不是自己最想要的效果。

正文

首先设置宽高

#myModal{
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

这时候发现，宽度太小

设置宽度

#myModal{
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    min-width:80%;/*这个比例可以自己按需调节*/
}

浏览器高度较小的时候会发现上边被覆盖。不过不用担心，将上述写法完善一下就行了，完善后的写法如下：

#myModal{
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    min-width:80%;/*这个比例可以自己按需调节*/
    overflow: visible;
    bottom: inherit;
    right: inherit;
}

完美实现