使用变量 sie 居中可切换 div

Question

我有一个 warning/message 弹出窗口 class 隐藏并通过 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

我会使用 transform 就像 this:

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

使用变量 sie 居中可切换 div

Centering a toggle-able div with variable sie

html

css

popup