div自动居于窗口的正中间的css原理




.window{
	width: 400px;
	position: absolute;
	margin-left: -200px;
	margin-top: -80px;
	top: 50%;
	left: 50%;
	display: block;
	z-index: 2000;
	border: 1px solid #006699;
}
原理是这样的:
因为这个块元素是绝对定位position: absolute。首先你要知道“绝对定位”的概念:它是以最近一个已经定位的祖先为基准进行定位,如果没有就以屏幕定位!
在这里(屏幕大小或祖先元素对于它来说就是100%);
top: 50%,就是在距屏幕上方或祖先元素50%,
left: 50%,就是在距屏幕左方或祖先元素50%,
因为它是以『左上角』为基准偏移的,它现在距离左边是:50%+400px,这个块的左上角在屏幕的中间,但是这个块元素不在屏幕中间,所以margin-left: -200px;把它想左边拉回一半,它就在屏幕中间了!
因为这里不知道你块的高度,所以margin-top: -80px;和上面的原理一样。往上拉回去一半。。


















  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值