网站首页编程语言正文

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

作者：bjt_yy 更新时间： 2022-07-26 编程语言

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

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多一些。

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

上一篇：css媒体查询
下一篇：ubuntu18.04+cuda10.2+tensorrt8

网站首页 编程语言 正文

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

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

相关推荐

网站首页编程语言正文