欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 编程资源 > 编程问答 >内容正文

编程问答

网页垂直居中的写法

发布时间：2025/7/25 编程问答 40 豆豆
生活随笔 收集整理的这篇文章主要介绍了 网页垂直居中的写法 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

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


一、最简单的，水平居中



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


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



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


    比较一下






  • <html>
  • <head>
  • <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  • <title>无标题文档</title>
  • <style>
  • *{margin:0; padding:0}
  • .a{ margin:0 auto; width:400px;border:1px solid #F00;}
  • </style>
  •  
  • </head>
  •  
  • <body>
  • <div class="a">aaaaaaaaaa</div>
  • </body>
  • </html>




    • <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
    *{margin:0; padding:0}
    .a{ margin:0 auto; width:400px;border:1px solid #F00;}
    </style>

    </head>

    <body>
    <div class="a">aaaaaaaaaa</div>
    </body>
    </html>









  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • <html xmlns="http://www.w3.org/1999/xhtml">
  • <head>
  • <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  • <title>无标题文档</title>
  • <style>
  • *{margin:0; padding:0}
  • .a{ margin:0 auto; width:400px;border:1px solid #F00;}
  • </style>
  •  
  • </head>
  •  
  • <body>
  • <div class="a">aaaaaaaaaa</div>
  • </body>
  • </html>




    • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
    *{margin:0; padding:0}
    .a{ margin:0 auto; width:400px;border:1px solid #F00;}
    </style>

    </head>

    <body>
    <div class="a">aaaaaaaaaa</div>
    </body>
    </html>





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


    < br />


  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • <html xmlns="http://www.w3.org/1999/xhtml">
  • <head>
  • <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  • <title>无标题文档</title>
  • <style>
  • *{margin:0; padding:0}
  • .wrapper{ margin:10px auto auto; width:400px; height:40px;border:1px solid #F00; text-align:center; line-height:40px}
  • </style>
  •  
  • </head>
  •  
  • <body>
  • <div class="wrapper">aaaaaaaaaa</div>
  • </body>
  • </html>




    • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
    *{margin:0; padding:0}
    .wrapper{ margin:10px auto auto; width:400px; height:40px;border:1px solid #F00; text-align:center; line-height:40px}
    </style>

    </head>

    <body>
    <div class="wrapper">aaaaaaaaaa</div>
    </body>
    </html>




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






  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • <html xmlns="http://www.w3.org/1999/xhtml">
  • <head>
  • <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  • <title>无标题文档</title>
  • <style>
  • *{margin:0; padding:0}
  • .wrapper{ margin:10px auto auto; width:400px;border:1px solid #F00; text-align:center; padding-top:40px; padding-bottom:40px}
  • </style>
  •  
  • </head>
  •  
  • <body>
  • <div class="wrapper">aaaaaaaaaa<br />aaaaaaaaaa<br />aaaaaaaaaa<br />aaaaaaaaaa<br />aaaaaaaaaa<br /></div>
  • </body>
  • </html>




    • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
    *{margin:0; padding:0}
    .wrapper{ margin:10px auto auto; width:400px;border:1px solid #F00; text-align:center; padding-top:40px; padding-bottom:40px}
    </style>

    </head>

    <body>
    <div class="wrapper">aaaaaaaaaa<br />aaaaaaaaaa<br />aaaaaaaaaa<br />aaaaaaaaaa<br />aaaaaaaaaa<br /></div>
    </body>
    </html>




     


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


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






  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • <html xmlns="http://www.w3.org/1999/xhtml">
  • <head>
  • <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  • <title>无标题文档</title>
  • <style>
  • *{margin:0; padding:0}
  • .wrapper{ width:400px; height:200px;border:1px solid #F00; text-align:center;position:absolute; left:50%; top:50%; margin-left:-200px; margin-top:-100px}
  • </style>
  •  
  • </head>
  •  
  • <body>
  • <div class="wrapper"></div>
  • </body>
  • </html>




    • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
    *{margin:0; padding:0}
    .wrapper{ width:400px; height:200px;border:1px solid #F00; text-align:center;position:absolute; left:50%; top:50%; margin-left:-200px; margin-top:-100px}
    </style>

    </head>

    <body>
    <div class="wrapper"></div>
    </body>
    </html>





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


     

    转载于:https://www.cnblogs.com/haozime/archive/2010/01/19/2639159.html

    总结

    以上是生活随笔为你收集整理的网页垂直居中的写法的全部内容，希望文章能够帮你解决所遇到的问题。

    如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。