html - 将可变大小的可切换 div 居中

Question

我有一个警告/消息弹出类，它是隐藏的并通过 jQuery 调用，我正在使用的当前方法将页面中 Div 的 START 居中，并且在移动设备中有奇怪的对齐方式，我该如何实现所以 Div 的中心在页面的中心？

我已经试过了，但它们不起作用:

display:table;
margin:0 auto;
text-align:center;

这是我的类(class)

.popup
{
    position:fixed;
    width:auto;
    height:auto;
    z-index:1001;
    padding:10px 20px 10px 20px;
    top:50%;
    left:50%;
    border-radius:5px;
    text-align:center;
    box-shadow:0 0 10px 0 #000;
    display:none;
}

Answer 1

使用转换:

.popup {
    position:fixed;
    width:auto;
    height:auto;
    z-index:1001;
    padding:10px 20px 10px 20px;
    transform:translateY(-50%);
    transform:translateX(-50%);
    top:50%;
    left:50%;
    border-radius:5px;
    text-align:center;
    box-shadow:0 0 10px 0 #000;
    display:none;
}