使元素在浏览器里始终处于居中位置代码,Css代码库,德仔网

代码语言

代码分类

【Css】使元素在浏览器里始终处于居中位置

作者:Dezai.CN / 发布于2012/12/21/ 736

<html>
<head>
	<title>test1</title>
	<link rel="stylesheet" type="text/css" href="test1.css">
	<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src='test1.js' ></script>
</head>
<body>
<div style="height:1000px;width:1000px;">
<div class='box'></div>
</div>
</body>
</html>
 

.box{
	width:200px;
	height:150px;
	background-color:#EFEEE5;
	border:1px solid silver;
}

jQuery.fn.center=function(){
	this.css('position','absolute');
	this.css('top',($(window).height()-this.height())/2+$(window).scrollTop()+'px');
	this.css('left',($(window).width()-this.width())/2+$(window).scrollLeft()+'px');
	return this;
}
function reinitLogin() {
	$('.login').text('hello');
	$('.login').center();
};
window.setInterval("reinitLogin()", 200);

试试其它关键字

同语言下

.前端PC-移动端CSS公共样式+HTML
.手机端页面通用样式
.H5页面通用头部设置
.elect默认样式美化代码兼容移动端和pc端
.按钮效果 css
.唤醒app
.放大效果
.html5+css3实现上拉和下拉刷新
.html上传图片后，在页面显示上传的图片
.html5实现点击弹出图片

可能有用的

.前端PC-移动端CSS公共样式+HTML
.手机端页面通用样式
.H5页面通用头部设置
.elect默认样式美化代码兼容移动端和pc端
.按钮效果 css
.唤醒app
.放大效果
.html5+css3实现上拉和下拉刷新
.html上传图片后，在页面显示上传的图片
.html5实现点击弹出图片

Dezai.CN贡献的其它代码(4037)

.多线程Socket服务器模块
.生成随机密码
.清除浮动样式
.弹出窗口居中
.抓取url的函数
.使用base HTTP验证
.div模拟iframe嵌入效果
.通过header转向的方法
.Session操作类
.执行sqlite输入插入操作后获得自动编号的ID