CSS使元素水平垂直居中的方法

最新推荐文章于 2023-09-30 13:11:25 发布

h5css3_linhuai

最新推荐文章于 2023-09-30 13:11:25 发布

阅读量558

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： html css 居中

本文链接：https://blog.youkuaiyun.com/h5css3_linhuai/article/details/72312544

css 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了两种使用CSS实现元素居中的方法：一是通过绝对定位和外边距来精确调整子元素的位置；二是利用绝对定位结合自动外边距，使子元素在父容器内水平和垂直居中。

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

1、使用绝对定位（position）和外边距（margin）

方法：（1）将父级（box）设置成相对定位（relative）；（2）将子级（content）设置成绝对定位（absolute）；（3）将子级（content）top、left设置成50%；（4）将子级（content）margin-left设置成 -（子级宽度的一半）；（5）将子（content）margin-top设置成 -（子级高度的一半）

<!DOCTYPE html>
<html>
<head>
	<title>元素居中方法一</title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		.box{
			width:400px;
			height: 300px;
			background: green;
			position: relative;
		}
		.content{
			width: 100px;
			height: 80px;
			background: blue;
			position: absolute;
			left: 50%;
			top:50%;
			margin-left: -50px;
			margin-top:-40px;
		}
	</style>
</head>
<body>
<div class="box">
	<div class="content"></div>
</div>
</body>
</html>

2、使用绝对定位（absolute）和外边距（margin:auto）

方法：（1）将父级（box）设置成相对定位（relative）；（2）将子级（content）设置成绝对定位（absolute）；（3）将子级（content）的top、right、bottom、left设置成0；（4）将子级（content）的margin设置成auto；

<!DOCTYPE html>
<html>
<head>
	<title>方法二</title>
	<style type="text/css">
		.box{
			width: 400px;
			height: 300px;
			position: relative;
			background: blue;
		}
		.content{
			width: 200px;
			height: 100px;
			position: absolute;
			margin: auto;
			left: 0;
			right: 0;
			top:0;
			bottom:0;
			background: green;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="content"></div>
	</div>
</body>
</html>