让一个有宽高的盒子垂直水平居中

bjt_yy

已于 2022-07-25 22:22:32 修改

阅读量123

点赞数

分类专栏：前端文章标签： css css3 html

于 2022-07-25 21:58:14 首次发布

本文链接：https://blog.csdn.net/bjt_yy/article/details/118892887

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

如何让一个有宽高的盒子垂直居中

1.利用盒子宽高和margin

<html>
	<head>
		<style type="text/css">
		*{
			padding: 0;
			margin: 0;
			list-style: none;
		}
		.fu{
			width: 750px;
			height: 600px;
			border: 1px solid gray;
			background-color: antiquewhite;
		}
		.son{
			width: 300px;
			height: 200px;
			border: 1px solid red;
			margin-left: 225px;
			margin-top: 200px;
			background-color: aquamarine;
		}
		</style>
	</head>
	<body>
		<div class="fu">
			<div class="son"></div>
		</div>
	</body>
</html>

该方法是需要精确的父元素宽高的情况下
界面如下图一：

2.利用盒子宽高和margin

<html>
	<head>
		<style type="text/css">
		*{
			padding: 0;
			margin: 0;
			list-style: none;
		}
		.fu{
			width: 750px;
			height: 600px;
			border: 1px solid gray;
			background-color: antiquewhite;
		}
		.son{
			width: 300px;
			height: 200px;
			border: 1px solid red;
			margin: 200px auto;
			background-color: aquamarine;
		}
		</style>
	</head>
	<body>
		<div class="fu">
			<div class="son"></div>
		</div>
	</body>
</html>

这种方法相比于第一种是只对上边距有明确的控制，而对左右用auto，与第一种几乎相同。

3.绝对定位+translate

<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
		*{
			padding: 0;
			margin: 0;
			list-style: none;
		}
		.fu{
			width: 750px;
			height: 600px;
			border: 1px solid gray;
			background-color: antiquewhite;
			position: relative;
		}
		.son{
			width: 300px;
			height: 200px;
			border: 1px solid red;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			background-color: aquamarine;
		}
		</style>
	</head>
	<body>
		<div class="fu">
			<div class="son"></div>
		</div>
	</body>
</html>

结果同图一
4.flex布局

<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
		*{
			padding: 0;
			margin: 0;
			list-style: none;
		}
		.fu{
			width: 750px;
			height: 600px;
			border: 1px solid gray;
			background-color: antiquewhite;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.son{
			width: 300px;
			height: 200px;
			border: 1px solid red;
			background-color: aquamarine;
		}
		</style>
	</head>
	<body>
		<div class="fu">
			<div class="son"></div>
		</div>
	</body>
</html>

结果同图一

这几总方法都可以用，但是有优点也有缺陷，本人一般使用方法2 3多一些。