页面内容居中方法

用CSS控制:

方式一:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>宁夏短期天气预报</title>
    <#include "/web/common/project/meta.ftl"/>
    <style type="text/css">
        .aa{
            position: absolute; 
            top: 50%;left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
    </style>

</head>
<body>
<p style="text-align: center;">宁夏短期天气预报</p>
<script type="text/javascript">
    (function ($) {
        
    }(jQuery));
</script>
<iframe class="aa" src="http://3g.nx121.com/pc/tqybnx.aspx" style="400px;height:400px;"></iframe>
</body>
</html>

方式二:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>宁夏短期天气预报</title>
    <#include "/web/common/project/meta.ftl"/>
</head>
<body>
<p style="text-align: center;">宁夏短期天气预报</p>
<script type="text/javascript">
    (function ($) {
        
    }(jQuery));
</script>
    <div style="400px;height:400px;margin:0px auto;">
        <iframe src="http://3g.nx121.com/pc/tqybnx.aspx" style="400px;height:400px;margin:0px auto;"></iframe>
    </div>
</body>
</html>

 页面内容自适应浏览器宽度:

<script language="javascript">
  //先获取到报表所在区域的页面元素,再通过document.body.clientWidth获得到浏览器的宽度,将该宽度值用于改变报表所在区域的样式宽度
  function myResize() {
    var tab1 = document.getElementById("sysReportIframe");
    tab1.style.width=document.body.clientWidth;
  }
  window.onload=myResize;
  window.onresize=myResize;
</script>
原文地址:https://www.cnblogs.com/shuilangyizu/p/6763185.html