Question

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

我试过这个并且他们不起作用：

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

这是我的班级

.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

我会像this那样使用transform：

.popup {
    /* .. Other rules */
   -webkit-transform: translateX(-50%) translateY(-50%);
   -moz-transform: translateX(-50%) translateY(-50%);
   -ms-transform: translateX(-50%) translateY(-50%);
   -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

Answer 2

使用transform：

.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;
}

以可变大小为中心的可切换div

2 个答案: