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

参考链接:https://cloud.tencent.com/developer/article/2263735

首先我们需要明白
translate移动百分比是相对于自身元素，所以弹窗居中我们可以直接写-50%
1、 transform:translate(x,y):沿X轴Y轴方向移动元素
transform:translateX(x):沿X轴方向移动元素
transform:translateY(y):沿Y轴方向移动元素
2、translate优点：不会影响其他元素的位置
3、translate中的百分比单位是相对于自身元素的translate(50%,50%),如果不写百分比则写像素
4、对行内标签没有效果

原先弹窗我们可以这样写

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

用了translate我们可以采用

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