美浩工作室是一个以90后团队为主的网站设计,制作,优化,维护为一体的网站建设工作室,为您量身定制适合企业自身的网站,欢迎咨询:15249241469

网页宽度高度自适应,垂直水平居中的方法

HTML/CSS mihoweb 3312℃ 0评论

很多时候在写网页的时候会用到垂直水平居中,都知道如果是水平居中,那就是先定义宽度,在用margin:0 auto;高度如果要居中,就是定义行高和高之后用vertical-align:middle;就可以完成这些了,可是如果要自适应宽度高度自适应怎么办? 这个根据div的宽度和高度自适应窗体的大小而水平垂直居中的方法可以有两种写法:一是用div+css,另一种就是用js获取窗口的大小从而居中,有用到的可以自己试试看!

未标题-1

1:div+css方法:

  1. <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>  
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>  
  3. <head>  
  4. <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8″ />  
  5. <title>DIV自适应高度上下左右垂直居中代码</title>  
  6. <style type=“text/css”>  
  7. body,html{height: 100%; }   
  8. #outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:ivory; }   
  9. #outer[id] {display: table; position: static;}   
  10. #middle {position: absolute; top: 50%;text-align:center;} /* for explorer only*/   
  11. #middle[id] {display: table-cell; vertical-align: middle; position: static;}   
  12. #inner {position: relative; top: -50%;width: 600px;margin: 0 auto;text-align:left;}/*for explorer only */   
  13. div.greenBorder {border: 1px solid green; background-color: #FFF; }   
  14. </style>  
  15. </head>  
  16. <body style=“background:#333″>  
  17. <div style=“height:100px; background:#333; line-height:100px; font-size:30px; font-family:’微软雅黑’; color:#FFF; text-align:center”>  
  18. DIV自适应高度上下左右垂直居中代码   
  19. </div>  
  20. <div style=“background:#FFF; padding:50px; height:600px;”>  
  21. <!–效果开始–>  
  22. <script type=“text/javascript”>  
  23. // <![CDATA[
  24.  
  25. function toggleContent(name,n) {  
  26.         var i,t='',el = document.getElementById(name);  
  27.         if (!el.origCont) el.origCont = el.innerHTML;  
  28.           
  29.         for (i=0;i<n;i++) t += el.origCont;  
  30.         el.innerHTML = t;  
  31.         }  
  32.  
  33. // ]]>  
  34. </script>  
  35. <div id=“outer”>  
  36.   <div id=“middle”>  
  37.     <div id=“inner” class=“greenBorder”>  
  38.       <p><a href=“javascript:toggleContent(‘inner’,1)”>默认长度</a>  <a href=“javascript:toggleContent(‘inner’,2)”>加长页面</a></p>  
  39.       <p>1.美浩工作室-西安网站建设 <br />  
  40.         2.美浩工作室-西安网站建设  <br />  
  41.         3.美浩工作室-西安网站建设<br />  
  42.         1美浩工作室-西安网站建设 <br />  
  43.         2美浩工作室-西安网站建设  <br />  
  44.         3.美浩工作室-西安网站建设</p>  
  45.     </div>  
  46.   </div>  
  47. </div>  
  48. <!–End–>  
  49. </div>  
  50. </body>  
  51. </html>  

 2:javascript的写法

  1. <div id=“container”>   
  2. 内容部分高648px。   
  3. </div>   
  4. <script type=“text/javascript”>    
  5. <!–    
  6. var heightdiv = 648;    
  7. var winWidth = 0;   
  8. var winHeight = 0;   
  9.   
  10. function findDimensions() //函数:获取尺寸   
  11. {   
  12. //获取窗口高度   
  13. if (window.innerHeight)   
  14. winHeight = window.innerHeight;   
  15. else if ((document.body) && (document.body.clientHeight))   
  16. winHeight = document.body.clientHeight;   
  17. //通过深入Document内部对body进行检测,获取窗口大小   
  18. if (document.documentElement && document.documentElement.clientHeight)   
  19. {   
  20. winHeight = document.documentElement.clientHeight;   
  21. }   
  22. if(winHeight>heightdiv){   
  23. var Nonebodyheight = winHeight - heightdiv   
  24. document.getElementById(“container”).style.marginTop = Nonebodyheight/2 + “px”;   
  25. }   
  26. else{document.getElementById(“container”).style.marginTop = “0px”;}   
  27. }    
  28.   
  29. findDimensions();   
  30. //调用函数,获取数值   
  31. window.onresize=findDimensions;   
  32.   
  33. //–>   
  34.   
  35. </script>  

大家可以在实际用到的时候自行修改,当然,如果有更好的方法,欢迎到评论里面提到。

如果您喜欢这篇文章,欢迎分享订阅。

转载请注明:美浩工作室官方博客 » 网页宽度高度自适应,垂直水平居中的方法

喜欢 (1)