CCS定位的盒子实现居中对齐（水平居中，垂直居中）

最新推荐文章于 2024-04-23 13:46:57 发布

原创最新推荐文章于 2024-04-23 13:46:57 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

85 篇文章

订阅专栏

本文介绍了如何使用CSS绝对定位实现盒子的水平和垂直居中对齐。当普通盒子通过margin设置auto无效时，可以利用定位算法，设置left为50%，再调整margin-left为自身宽度的一半来实现居中效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

绝对定位的盒子水平/垂直居中

普通的盒子是左右margin 改为 auto就可，但是对于绝对定位就无效了（浮动float，margin=auto也失效）

定位的盒子也可以水平或者垂直居中，有一个算法。

首先left 50% 父盒子的一半大小
然后走自己外边距负的一半值就可以了 margin-left。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	div {
		width: 200px;
		height: 200px;
		background-color: pink;
		/*margin: 100px auto;*/
		/*float: left;*/
		position: absolute;
		/*加了定位或浮动的的盒子  margin 0 auto 失效了*/
		left: 50%;
		margin-left: -100px;
		top: 50%;
		margin-top: -100px;
	}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

小案例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	* {
		margin: 0;
		padding: 0;
	}
	.sf {
		width: 1259px;
		height: 472px;
		margin: 100px auto;
		position: relative;
	}
	.nav {
		width: 960px;
		height: 80px;
		background-color: #000;
		position: absolute;
		bottom: 0;
		left: 50%;
		margin-left: -480px;
	}
	.nav li {
		float: left;
		width: 160px;
		height: 80px;
		list-style: none;
	}
	.nav li a {
		width: 160px;
		height: 80px;
		display: block;   /*a不是块级元素，转化为块级元素才能设置宽和高。*/
		text-align: center;
		line-height: 80px;
		color: #fff;
		text-decoration: none;
	}
	.nav li a:hover {
		background-color: #fff;
		color: #000;
	}
	</style>
</head>
<body>
	<div class="sf">
		<a href="#">
			<img src="images/sf.png" height="472" width="1259" alt="">
		</a>
		<div class="nav">
			<ul>
				<li><a href="#">快递查询</a></li>
				<li><a href="#">快递查询</a></li>
				<li><a href="#">快递查询</a></li>
				<li><a href="#">快递查询</a></li>
				<li><a href="#">快递查询</a></li>
				<li><a href="#">快递查询</a></li>
			</ul>
		</div>
	</div>
</body>
</html>