前言
模态框居中这个问题很常用,网上代码也很多,但是往往不是自己最想要的效果。
正文
首先设置宽高
#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;
}
完美实现