3

找到了一种在应用程序中制作居中弹出窗口（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%)线路的责任。有人遇到过同样的问题吗？有什么解决办法吗？

4

1 回答 1

3

嗯，这确实是一个不错的解决方案，因为它不需要您知道定位容器的宽度和高度。如果您知道它们，则可以将 transform 替换为适当的负边距：

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

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

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

但是，如果在将变换切换到边距后问题消失了，那么您可能会遇到一些抗锯齿问题，这些问题是由于将弹出窗口的渲染移动到 GPU 引起的。由于变换是众所周知的硬件加速 CSS 属性之一，为了使其运行流畅，浏览器通常会将这些元素移动到单独的层中，这比完全由 GPU 处理更快，但通常会导致一些伪影（主要在字体上可见并缩放元素）。

于 2014-12-26T20:52:52.903 回答