模态框居中

前言

模态框居中這個問題很常用，網上代碼也很多，但是往往不是自己最想要的效果。

正文

首先設定寬高

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

這時候發現，寬度太小

設定寬度

#myModal{
    left: ;
    top: ;
    transform: translate(-50%,-50%);
    min-width:;/*這個比例可以自己按需調節*/
}
           

浏覽器高度較小的時候會發現上邊被覆寫。不過不用擔心，将上述寫法完善一下就行了，完善後的寫法如下：

#myModal{
    left: ;
    top: ;
    transform: translate(-50%,-50%);
    min-width:;/*這個比例可以自己按需調節*/
    overflow: visible;
    bottom: inherit;
    right: inherit;
}
           

完美實作