css两种居中方式对比

最新推荐文章于 2024-04-09 19:59:55 发布

原创最新推荐文章于 2024-04-09 19:59:55 发布 · 584 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

html+css 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了两种使用CSS实现元素居中的方法：一种是利用position属性使元素固定在页面中心，即使页面滚动也能保持居中；另一种是通过margin:auto实现普通居中，但随滚动条滚动。文中提供了具体的HTML和CSS代码示例。

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>