css transform() 弹出窗口问题的中心定位答案

【问题标题】：css transform() center positioning of a popup window issuecss transform() 弹出窗口问题的中心定位
【发布时间】：2015-02-15 18:44:03
【问题描述】：

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

【问题讨论】：

我真的不明白你的意思。你确定这不是你正在看的盒子阴影吗？它在白色模态窗口之外产生了非常轻微的光晕。
@misterManSam div 的左右边界不如底部和顶部清晰。 100% 缩放时“像素”不精确。
看起来问题是因为十进制值，在小提琴中我使用 jQuery 通过使用 parseInt fiddle 将内容垂直和水平居中定位
这个想法是将任何定位代码从 js 删除到 css。我开始认为我在这个追求中失败了......
这是另一种使用纯 css 居中弹出窗口的方法jsfiddle.net/Ikhtiyor/jhwmns2q

标签： html css css-position transform bem

【解决方案1】：

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

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

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

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

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

【讨论】：