Question

我正在使用此方法在屏幕上居中：

#container {
        position:fixed;
        width:100%;
        height:100%;
        top:50%;
        left:50%;
        margin-top:-50%;
        margin-left:-50%;
        -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
        -o-transform: scale(0.8);
        transform: scale(0.8);
    }

（我需要扩展某些功能）

它适用于Safari，但在Chrome和Firefox中垂直对齐。是否有类似的方法可以跨浏览器工作？

Answer 1

这是我解决它的方式：

我通过jQuery重写了100％的盒子大小。一旦特定尺寸设置为框，它似乎在FF和Chrome中工作。

当页面首次加载时，我通过仅在需要时动态应用变换来解决不需要的转换。 ...除非有一种更简洁的方法从转换中完成callBack？

示例：https://dl.dropboxusercontent.com/u/7782299/sample/zoom2.html

这是完整的代码：

<!DOCTYPE html>

<html lang="en">
<head>

    <link rel="stylesheet" href="support/CSSreset.css" type="text/css" charset="utf-8">

    <style>

    body {
        background:red;
        overflow:hidden;
    }

    #container {
        position:fixed;
        top:50%;
        left:50%;
        background:blue;
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
    }
        #container.preon {
            -webkit-transition: all 0.5s ease-in-out;
            -moz-transition: all 0.5s ease-in-out;
        }

        #container.on {
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
        }

    </style>

    <script src="support/jquery-2.0.3.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">

    $(document).ready( function() {

        $('#container').click(function() {

            $('#container').addClass('preon');
            $('#container').toggleClass('on');
            setTimeout( function() { $('#container').removeClass('preon'); }, 600);

        });

        placeContainer = function placeContainer() {

            $('#container').css({
                width: $(window).width() + "px",
                height: $(window).height() + "px",
                marginLeft: (($(window).width())/2)*-1,
                marginTop: (($(window).height())/2)*-1
            });

        };

        placeContainer();

    });

    $(window).resize(function() {

        placeContainer();

    });

    $(window).trigger('resize');

    </script>


</head>
<body>

    <div id="container"></div>

</body>
</html>

跨浏览器以缩放元素为中心

1 个答案: