固定宽高的div在浏览器中垂直居中

前段时间做的一个网络应用程序,在后期的测试时发现了一个问题。在不同的显示器(17寸/19寸)上显示有很大的区别。我的登录界面在19宽屏上就不是居中显示了。

想了很多方法,在17屏上就没问题,居中显示。后来考虑采用固定宽高的DIV来显示登录的界面,可以实现居中的效果,并已测试通过。
首先在CSS文件中添加DIV的样式,具体如下:

.div
{
	position:absolute;
	top:50%;left:50%;
	width:980px;height:368px;
	margin:-184px 0 0 -490px;
	border:0px solid #000000;
}

position:absolute,绝对定位,可以把这个div看成漂浮于这个页面之上的,通过top:50%和left:50%定位这个div的位置,但这个时候,垂直与水平居中的是这个div 左上角这一点。

所以,要让这个div的中心点位于整个页面的中间,需要使用负边界,负的上边界,负值是高度的一半;负的左边界,负值是宽度的一半。

然后,把登录界面的table包含在<div></div>中,同时设定<div class=&apos;div&apos;>。最后别忘了在<HEAD></HEAD>中加入CSS文件的引用:

      

 
 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值