使用css的绝对定位来控制页面居中的方法之一

最新推荐文章于 2022-08-08 10:10:32 发布

Keycer

最新推荐文章于 2022-08-08 10:10:32 发布

阅读量3.4k

点赞数

分类专栏： web前端文章标签： CSS 居中绝对定位

本文链接：https://blog.csdn.net/zgrjkflmkyc/article/details/44401893

版权

web前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

直接上代码。。。

1.绝对居中（水平和垂直方向都居中）

<html>
<head>
<style type="text/css">
#main{     /*css只有这种注释方法，不能用双斜线注释，否则会发生你意想不到的问题*/
	position:absolute;  
	left:50%; /*left设置为50%，这时是以元素的左侧进行的水平居中，所以需要设置margin-left为元素宽度的一半:-200px;*/
	top:50%;   /*top设置为50%, 这时是以元素的上边进行的垂直居中，所以需要设置margin-top为元素宽度的一半:-200px;*/
	margin-top:-200px;    
	margin-left:-200px;
	width:400px;
	height:400px;
	background-color:green;
}

#child{
	width:200px;
	height:200px;
	position:absolute;
	left:20px;
	top:50px;
	background-color:yellow;
	border:1px solid blue;
}
</style>
</head>
<body style="text-align:center;">
<div id="main"> 
	<div id="child">
	</div>
</div>
</body>
</html>

在IE下测试：

在Firefox浏览器下测试：

在猎豹浏览器下测试：

在360浏览器下测试：

从上面的效果来看，这个方法的兼容性还是很高的。

2.水平居中（即只是水平方向居中）

<html>
<head>
<style type="text/css">
#main{     /*css只有这种注释方法，不能用双斜线注释，否则会发生你意想不到的问题*/
	position:absolute;  
	left:50%; /*left设置为50%，这时是以元素的左侧进行的水平居中，所以需要设置margin-left为元素宽度的一半:-200px;*/
	margin-left:-200px;
	width:400px;
	height:400px;
	background-color:green;
}

#child{
	width:200px;
	height:200px;
	position:absolute;
	left:20px;
	top:50px;
	background-color:yellow;
	border:1px solid blue;
}
</style>
</head>
<body style="text-align:center;">
<div id="main"> 
	<div id="child">
	</div>
</div>
</body>
</html>

猎豹浏览器下测试：

（---------------完---------------）

Keycer

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用css的绝对定位来控制页面居中的方法之一

直接上代码。。。1.绝对居中（水平和垂直方向都居中）#main{ /*css只有这种注释方法，不能用双斜线注释，否则会发生你意想不到的问题*/ position:absolute; left:50%; /*left设置为50%，这时是以元素的左侧进行的水平居中，所以需要设置margin-left为元素宽度的一半:-200px;*/ top:50%; /*top设
复制链接

扫一扫

专栏目录