盒子内容垂直居中

最新推荐文章于 2025-04-17 11:42:57 发布

年年CODE

最新推荐文章于 2025-04-17 11:42:57 发布

阅读量2.8k

点赞数 3

分类专栏： DOM节点的增 ·删· 改· 查文章标签：盒子模型垂直居中

本文链接：https://blog.youkuaiyun.com/qq_38743783/article/details/83931216

版权

DOM节点的增 ·删· 改· 查专栏收录该内容

14 篇文章

订阅专栏

本文介绍了四种使用CSS实现元素垂直居中的方法：通过绝对定位和margin自动调整、将父级元素变为表格单元格并设置垂直对齐、利用绝对定位结合负margin、以及使用弹性盒子布局。每种方法都附带了详细的代码示例。

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

盒子内容垂直居中有两种：
1.给父级加上相对定位position:relative; 给子元素添加绝对定位position:absolute;
设置top,right,bottom,left的值都是0；调整margin内边距为自适应auto;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			.main{
				width: 800px;
				height: 700px;
				background-color: #999999;
				position: relative;
			}
			.main .main1{
				width: 300px;
				height: 300px;
				background-color: red;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<div class='main'>
			<div class='main1'></div>
		</div>
	</body>
</html>

在这里插入图片描述
第二种方法：
1.将父级变成单元格，display:table-cell; 设置内部元素垂直对齐vertical-align:middle;
text-align:center; 居中
2.子元素配合父元素，变成行内块级元素display:inline-block;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			.main{
				width: 500px;
				height: 400px;
				background-color: #999999;
				display: table-cell;/*变成表格单元格*/
				vertical-align: middle;
				text-align: center;
			}
			.main .main1{
				width: 100px;
				height: 100px;
				background-color: red;
				display: inline-block;
			}
		</style>
	</head>
	<body>
		<div class='main'>
			<div class='main1'></div>
		</div>
	</body>
</html>

在这里插入图片描述
第三种与第一种相似
1.给父级加上相对定位position:relative; 给子元素添加绝对定位position:absolute;
设置top,left,margin-top:-自身高度的一半；margin-left:-自身宽度的一半；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			.main{
				width: 500px;
				height: 400px;
				background-color: #999999;
				position: relative;
			}
			.main .main1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
				top: 50%;
				margin-top: -150px;
				left: 50%;
				margin-left: -150px;
		}
		</style>
	</head>
	<body>
		<div class='main'>
			<div class='main1'></div>
		</div>
	</body>
</html>

在这里插入图片描述
第四种需要用到弹性盒子。简单方便
1.给弹性容器(父容器)添加display:flex;
2.给弹性容器的子元素加上 margin:auto;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			.main{
				width: 500px;
				height: 400px;
				background-color: #999999;
				display: flex;
			}
			.main .main1{
				width: 100px;
				height: 100px;
				background-color: red;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<div class='main'>
			<div class='main1'></div>
		</div>
	</body>
</html>

在这里插入图片描述
效果一样简单便捷。