CSS中常见的几种垂直居中的方式 (目前四种，未完待续。。。)

最新推荐文章于 2021-12-11 14:21:32 发布

Python User

最新推荐文章于 2021-12-11 14:21:32 发布

阅读量243

点赞数

分类专栏： CSS/CSS3 文章标签： css css3

本文链接：https://blog.youkuaiyun.com/weixin_44684357/article/details/110099982

版权

CSS/CSS3 专栏收录该内容

23 篇文章

订阅专栏

1，flex 布局的方式：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>水平-垂直居中</title>
	<style>
		.con {
			width: 400px;
			height: 400px;
			background-color: yellow;
			margin: 100px auto;
			/* flex 布局的方式 */
			display: flex;
			justify-content:center;
			align-items:center;
		}
		.con .son {
			width: 50px;
			height: 50px;
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="con">
		<div class="son"></div>
	</div>
</body>
</html>

2，子绝父相，transform 的方式；

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>水平-垂直居中</title>
	<style>
		.con {
			width: 400px;
			height: 400px;
			background-color: yellow;
			margin: 100px auto;
			
			/*子绝父相，transform 的 方式*/
			position: relative;
		}
		.con .son {
			width: 50px;
			height: 50px;
			background-color: red;

			/*子绝父相，transform 的 方式*/
			position: absolute;
			top: 50%;
			left:50%;
			transform: translate(-50%, -50%);
		}
	</style>
</head>
<body>
	<div class="con">
		<div class="son"></div>
	</div>
</body>
</html>

3，子绝父相，margin 一半的方式；

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>水平-垂直居中</title>
	<style>
		.con {
			width: 400px;
			height: 400px;
			background-color: yellow;
			margin: 100px auto;

			/*子绝父相，margin一半的 方式*/
			position: relative;
		}
		.con .son {
			width: 50px;
			height: 50px;
			background-color: red;

			/*子绝父相，margin一半的 方式*/
			position: absolute;
			top: 50%;
			left:50%;
			margin-top: -25px;
			margin-left: -25px;
		}
	</style>
</head>
<body>
	<div class="con">
		<div class="son"></div>
	</div>
</body>
</html>

4，绝对定位下top left right bottom 都设置0的方式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>水平-垂直居中</title>
	<style>
		.con {
			width: 400px;
			height: 400px;
			background-color: yellow;
			margin: 100px auto;

			/*绝对定位下top left right bottom 都设置0的方式*/
			position: relative;
		}
		.con .son {
			width: 50px;
			height: 50px;
			background-color: red;

			/*子绝对定位下top left right bottom 都设置0的方式*/
			position: absolute;
			top: 0;
			left:0;
			right: 0;
			bottom: 0;
			margin: auto;
		}
	</style>
</head>
<body>
	<div class="con">
		<div class="son"></div>
	</div>
</body>
</html>