欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

HTML DIV 浏览器屏幕居中显示方法（CSS）

程序员文章站 2022-03-02 19:03:13
...
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>DIV屏中显示方法CSS</title>
    <style type="text/css">
        .divbg
        {
            background-image: url('imgs/LoginBG.gif');
            height:800px;
            width:1000px;
            position:absolute;
            top:50%;
            left:50%;
            margin-top:-400px;
            margin-left:-500px;
            margin-right:0px;
            margin-bottom:0px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="divbg">
    
    </div>
    </form>
</body>
</html>


CSS原理说明：

position:absolute; 显示方式要是绝对定位，不能相对

top:50%;left:50%; 显示开始位置是屏幕的中心点

margin-top:-400px;通过将上边距，向上调整负值，让DIV纵向居中。负值的绝对值应当是height的1/2
margin-left:-500px;通过将左边距，向左调整负值，让DIV横向居中。负值的绝对值应当是width的1/2

如果使用的背景图，可以将div的width和height设置为图片的尺寸

相关标签： HTML DIV 屏幕 居中 CSS

上一篇： Ubuntu安装MySQL及使用Xshell连接MySQL出现的问题(2003-Can't connect to MySql server及1045错误)

下一篇： 醒图怎么把多余的人p掉?醒图p掉多余的人教程

推荐阅读