我正在使用此方法将屏幕上的框居中：
#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中无法进行垂直对齐。有没有类似的方法可以跨浏览器使用？
最佳答案
这是我解决的方法：
我通过jQuery重新编写了100％的框大小。将特定尺寸设置为该框后，它似乎可以在FF和Chrome中使用。
当页面首次加载时，我通过仅在需要时动态应用转换来解决不必要的转换。 ...除非有更清洁的方法来完成转换的回叫？
样本：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>
关于css - 跨浏览器居中与缩放元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19966502/