替换transform：翻译（）

我需要修改我的Css。这是我的CSS替换transform：翻译（）

.msg { 
    background-color: #fff; 
    border: 3px solid #fff; 
    display: inline-block; 
    left: 50%; 
color:#123456; 
    opacity: 0; 
    padding: 35px; 
    position: fixed; 
    text-align: justify; 
    top: 40%; 
    visibility: hidden; 
    z-index: 10; 

    -webkit-transform: translate(-50%, -50%); 
    -moz-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    -o-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
}

如何删除下面的部分，仍然得到同样的结果？

-webkit-transform: translate(-50%, -50%); 
-moz-transform: translate(-50%, -50%); 
-ms-transform: translate(-50%, -50%); 
-o-transform: translate(-50%, -50%); 
transform: translate(-50%, -50%);

来源

2014-03-04 Liyana Natalie

为什么你需要删除转换代码？当你自己删除它时，哪些功能会中断？ – TylerH

该部分导致.msg中的文本看起来很模糊。当我尝试删除这部分文本是正常的。 –

由于元素被定位为'fixed'，所以唯一的方法是指定显式的'height'和'width'，并在每一边使用负边距来将元素保留在页面中间。 –

如果你可以为.msg定义一个特定的高度，这可能工作。

.msg { 
    background-color: #fff; 
    border: 3px solid #fff; 
    display: inline-block; 
    height:200px; /*If you can define this*/ 
    width:200px; /*and this*/ 
    top:calc(40% - 100px); /*then use calc() to subtract half of .msg from top*/ 
    left:calc(50% - 100px); /*then use calc() to subtract half of .msg from top*/     
    color:#123456; 
    opacity: 0; 
    padding: 35px; 
    position: fixed; 
    text-align: justify; 
    visibility: hidden; 
    z-index: 10; 
}

来源

2014-03-04 20:46:10

我只使用宽度和left.calc - 它完美地工作......谢谢。 –

@LiyanaNatalie无需使用CSS3'calc（）'函数（因为它不适用于IE8-）。正如我所指出的，你可以使用负边距作为边距：-100px; margin-left：-100px;'。 –

替换transform：翻译（）

回答

相关问题