css两种居中方式对比

最新推荐文章于 2022-03-31 22:32:54 发布

雨夜星辰03

最新推荐文章于 2022-03-31 22:32:54 发布

阅读量456

点赞数

分类专栏： html+css

本文链接：https://blog.csdn.net/QWERTY1994/article/details/57072625

版权

html+css 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1.浮动始终上下左右居中

<html>
	<head>
		<title></title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
	</head>
	<style type="text/css">
	body{
		background: yellow;
		padding:0;
		margin: 0;
	}
		#fixed-div{
			width: 200px;
			height: 200px;
			background: slateblue;
			position: fixed;
    		margin:auto;
    		left:0; 
    		right:0; 
    		top:0; 
    		bottom:0;
		}
		
	</style>
	<body>
			<div id="fixed-div">
				浮动居中
			</div>
			
	</body>
</html>

效果如下

滚动条下拉依然上下左右居中

left:0;和right:0;控制左右居中不需要左右居中可以移除这两个

同理上下居中也是一个道理

2.普通居中会随着滚动条运动而变化位置

<html>
	<head>
		<title></title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
	</head>
	<style type="text/css">
	body{
		background: yellow;
		padding:0;
		margin: 0;
	}
		#center-div{
			width: 200px;
			height: 200px;
			background: slateblue;
			margin: auto;
		}
		
	</style>
	<body>
			<div id="center-div">
				居中
			</div>
		
			
	</body>
</html>

效果图如上滚动条滚动就会随着一起运动显示不完全

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

雨夜星辰03

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css两种居中方式对比

1.浮动始终上下左右居中 body{ background: yellow; padding:0; margin: 0; } #fixed-div{ width: 200px; height: 200px; background: slateblue; position: fixed; margin:auto;
复制链接

扫一扫