css使盒子垂直居中的方法

最新推荐文章于 2025-07-02 15:54:47 发布

原创最新推荐文章于 2025-07-02 15:54:47 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#div如何垂直居中 #css如何使div垂直居中 #div垂直居中的办法

js前端专栏收录该内容

30 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>盒子垂直居中的方法</title>
	<style type="text/css">
		/*
			1.先让子盒子的上边缘和父盒子的水平中心线重叠，然后再让盒子往回移动自身的一半距离(父级相对定位，子级绝对定位)
			2.使用表格的vertical-align:middle实现盒子垂直居中，需要配合display:table-cell;
			3.使用margin计算盒子的上下边距，使盒子居中
		*/

		/*1*/
		/*.t1{
			width: 300px;
			height: 300px;
			border: 1px solid red;
			position: relative;
		}

		.t2{
			width: 200px;
			height: 200px;
			border: 1px solid blue;
			position: absolute;
			margin-top: 150px;
			top: -101px;
		}*/

		/*2*/
		/*.t1{
			width: 300px;
			height: 300px;
			border: 1px solid red;
			display: table-cell;
			vertical-align: middle;
		}

		.t2{
			width: 200px;
			height: 200px;
			border: 1px solid blue;
			}*/

		/*3*/
		.t1{
			width: 300px;
			height: 300px;
			border: 1px solid red;
		}

		.t2{
			width: 200px;
			height: 200px;
			border: 1px solid blue;
			margin-top: 49px;
		}
	</style>
</head>
<body>
		<div class="t1">
			<div class="t2"></div>
		</div>
</body>
</html>