HTML DIV 浏览器屏幕居中显示方法(CSS)

<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设置为图片的尺寸

猜你喜欢

转载自blog.csdn.net/jyh_jack/article/details/78431210