css 定位position: absolute居中

最新推荐文章于 2025-06-07 20:47:06 发布

BlueSky_x

最新推荐文章于 2025-06-07 20:47:06 发布

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css

本文链接：https://blog.youkuaiyun.com/XuHang666/article/details/84566856

css 专栏收录该内容

3 篇文章

订阅专栏

本文介绍三种CSS居中布局方法，包括使用margin、transform和百分比margin，以及如何利用JS实现页面元素的响应式调整，适应不同屏幕尺寸。

这是个很小的点：只是为了方便使用

/*方式一*/
.main_center{
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto; /*auto属性，相当于移到中心点*/
}

/*方式二*/
.main_center{
    position: absolute;
    left:0;
    right:0;
    transform:translate(-50%,-50%); /*浏览器自动计算（css3属性）*/
}

/*方式三*/
.main_center{
    position:absolute;
    left:0;
    top:0;
    margin: -50% -50%; /*此处可替换为：margin: -50%*/ 
}

css div背景图片自适应屏幕大小并按比例缩放

<div style="height: 500px;width: 100%;background: url(fff.jpg) no-repeat center center ; background-size: 100%;"></div>

JS监听窗口大小变化

window.onresize=function(){  
	var offsetWid = document.documentElement.clientWidth;
	if(offsetWid<800){
	    document.getElementById("cyberexdesc").style.width="60%";
	}

	if(offsetWid>800){
	    document.getElementById("cyberexdesc").style.width="30%";
	}
}

JS动态改变css样式

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>全局样式</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>

<body>

     
<div class="row"  style="width:100%;background-color:greenyellow;">
    <div class="col-md-6" >
	    	<div id="footerbl" style="float: right;">
					 <a target="_blank" href="" style="text-decoration:none;height:20px;line-height:20px;">
						 <img src="http://www.beian.gov.cn/portal/download?token=6ec78cc1-9222-4801-853f-c80d8e2b2cd4" />
						 <font style="color:#939393;">粤公网安备 44010402001763号</font >
					 </a>
				</div>	 
    </div>
		<div class="col-md-6" >
				<div id="footerbr"  style="float: left">
					<font style="color:#939393;width:100px;">粤ICP备18155667号</font >
				</div>
		</div>	
</div>
	<script>
		window.onload=function(){
			var fbl = document.getElementById('footerbl')
			var fbr = document.getElementById('footerbr');
			var cw = document.documentElement.clientWidth;
			var ch = document.documentElement.clientHeight;
			if(ch>=cw){
				fbl.style.cssText = "text-align:center";
				fbr.style.cssText = "text-align:center";
			}else{
				fbl.style.cssText = "float: right;";
				fbr.style.cssText = "float: left";
			}
		}
		window.onresize=function(){
			var fbl = document.getElementById('footerbl')
			var fbr = document.getElementById('footerbr');
			var cw = document.documentElement.clientWidth;
			var ch = document.documentElement.clientHeight;
			if(ch>=cw){
				fbl.style.cssText = "text-align:center";
				fbr.style.cssText = "text-align:center";
			}else{
				fbl.style.cssText = "float: right;";
				fbr.style.cssText = "float: left";
			}
		}
	</script>
    
</body>
</html>

监听浏览器滚动条距离顶部变化

<div id="ipv6" style="border-radius: 5px;background-color: dodgerblue;display: inline-block;padding: 8px;position: absolute;top: 20px;left: 20px;">
			<font color="white" style="font-weight: 600;font-family:'新宋体';">网址支持IPV6</font>
		</div>
		
		<div style="height: 2000px;"></div>
		<script>
			window.onscroll= function(){
				var t = document.documentElement.scrollTop||document.body.scrollTop;
				if(t>10){
					var ipv6 = document.getElementById('ipv6');
					ipv6.style.display = 'none';
				}else{
					var ipv6 = document.getElementById('ipv6');
					ipv6.style.display = 'inline-block';
				}
			}
			
		</script>