css transform（）弹出窗口问题的中心定位

Question

找到了一种在应用程序中设置居中弹出窗口（http://www.w3.org/Style/Examples/007/center）的有趣方法。 简单而好看的代码（http://jsfiddle.net/babaca/6rwL0v0c/22/）。

HTML

<div class="__holder">
    <div class="__box">
        <h2>Some header</h2>
        Some bunch of content etc
    </div>
</div>

CSS

.__holder {
    position: fixed;
    z-index: 15000;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background-color: rgba(0,0,0,.5);
}
.__box {
    position: absolute;
    z-index: 16000;
    top: 50%;
    left: 50%;

    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    margin-right: -50%;
    padding: 0;

    transform: translate(-50%, -50%);

    -webkit-border-radius: 6px;
       -moz-border-radius: 6px;
            border-radius: 6px;
    background-color: #fff;
    -webkit-box-shadow: 0 0 18px 3px rgba(0, 0, 0, .07);
       -moz-box-shadow: 0 0 18px 3px rgba(0, 0, 0, .07);
            box-shadow: 0 0 18px 3px rgba(0, 0, 0, .07);

    padding: 29px;
}

渲染的唯一问题：取决于浏览器窗口的缩放级别，有或者水平或垂直边不锐利，在2像素之间平滑/模糊...（chrome版本39.0.2171.95 m ，firefox 34.0.5）这是一个例子（窗口的左右两边平滑）：

我发现它是transform: translate(-50%, -50%)行的责任。 有人遇到过同样的问题吗？任何解决方案？

Answer 1

嗯，这确实是一个很好的解决方案，因为它不需要你知道定位容器的宽度和高度。如果你了解它们，你可以用适当的负边距替换变换：

margin-left: -90px; // half of the popup width
margin-top: -45px; // half of the popup height

这是小提琴，看看这些问题是否仍然出现：http://jsfiddle.net/bcbpc6ey/

如果他们这样做，问题可能是由内部浏览器缩放算法引起的，你无能为力，因为这就是浏览器的运作方式。

但是，如果在转换为边距之后问题消失，则可能会遇到一些通过将弹出窗口的渲染移动到GPU而引起注意的一些反义问题。由于transform是众所周知的硬件加速CSS属性之一，为了使其运行流畅，浏览器通常会将这些元素移动到一个单独的层中，而不是完全由GPU处理，这更快，但通常会导致一些瑕疵（大多数在字体上可见并且缩放元件）。