网页垂直居中的写法

网页设计中居中的格式定义非常地常见，现在我就把我在工作中遇到的种种居中的情况做个小小的整理，这里主要讲的是垂直居中


一、最简单的，水平居中



XML/HTML 代码复制内容到剪贴板



  1.  

  2. *{margin:0; padding:0}

  3. .wrapper{ margin:0 auto; width:400px;border:1px solid #F00;}




只要定义margin:0 auto和层宽就可以了。不过有个前提，这种代码是xhtml中的写法，所以文件头一定要定义


比较一下




 


  1. <html>

  2. <head>

  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  4. <title>无标题文档</title>

  5. <style>

  6. *{margin:0; padding:0}

  7. .a{ margin:0 auto; width:400px;border:1px solid #F00;}

  8. </style>

  9.  

  10. </head>

  11.  

  12. <body>

  13. <div class="a">aaaaaaaaaa</div>

  14. </body>

  15. </html>









 


  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>无标题文档</title>

  6. <style>

  7. *{margin:0; padding:0}

  8. .a{ margin:0 auto; width:400px;border:1px solid #F00;}

  9. </style>

  10.  

  11. </head>

  12.  

  13. <body>

  14. <div class="a">aaaaaaaaaa</div>

  15. </body>

  16. </html>







二、高度和宽度都固定，且只有一行文字，将line-height和height定义成相等


< br />

 


  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>无标题文档</title>

  6. <style>

  7. *{margin:0; padding:0}

  8. .wrapper{ margin:10px auto auto; width:400px; height:40px;border:1px solid #F00; text-align:center; line-height:40px}

  9. </style>

  10.  

  11. </head>

  12.  

  13. <body>

  14. <div class="wrapper">aaaaaaaaaa</div>

  15. </body>

  16. </html>







三，层的高度自适应，将padding-top和 padding-bottom高成等值




 


  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>无标题文档</title>

  6. <style>

  7. *{margin:0; padding:0}

  8. .wrapper{ margin:10px auto auto; width:400px;border:1px solid #F00; text-align:center; padding-top:40px; padding-bottom:40px}

  9. </style>

  10.  

  11. </head>

  12.  

  13. <body>

  14. <div class="wrapper">aaaaaaaaaa<br />aaaaaaaaaa<br />aaaaaaaaaa<br />aaaaaaaaaa<br />aaaaaaaaaa<br /></div>

  15. </body>

  16. </html>







 


四、层的长和宽固定（这种情况多用于针对body的垂直显水平居中）


将position设成absolute; left:50%; top:50%; margin-left和margin-top向左和向上缩进一半




 


  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>无标题文档</title>

  6. <style>

  7. *{margin:0; padding:0}

  8. .wrapper{ width:400px; height:200px;border:1px solid #F00; text-align:center;position:absolute; left:50%; top:50%; margin-left:-200px; margin-top:-100px}

  9. </style>

  10.  

  11. </head>

  12.  

  13. <body>

  14. <div class="wrapper"></div>

  15. </body>

  16. </html>







居中的情况很多种，我们在日常开发时经常遇到层的高度固定，要使里面的多行li内容垂直居中。上面的方式由于使用到了绝对定位，很多情况下我们都是通过目测的方式，将padding-top设置大概的距离，来达到所谓的“垂直居中”


 

 posted on 2010-01-19 13:37  耗子么  阅读(142)  评论(0)  编辑  收藏  举报