块级元素垂直居中-CFANZ编程社区

可参考：https://blog.csdn.net/zhang_yu_ling/article/details/90272623
1、 display: flex;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.out{
				width: 500px;
				height: 500px;
				background-color: skyblue;
				display: flex;
				align-items: center;/*垂直居中*/
				/*justify-content: center;*//*水平居中*/
				
			}
			.in{
				width: 100px;
				height: 100px;
				background-color: salmon;
			}
		</style>
	</head>
	<body>
		<div class="out">
			<div class="in"></div>
		</div>
	</body>
</html>

2、子绝父相—用法1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.out{
				width: 500px;
				height: 500px;
				background-color: skyblue;	
				position: relative;			
			}
			.in{
				width: 100px;
				height: 100px;
				background-color: salmon;
				position: absolute;
				top: 50%;
				margin-top: -50px;
			}
		</style>
	</head>
	<body>
		<div class="out">
			<div class="in"></div>
		</div>
	</body>
</html>

3、子绝父相—用法2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.out{
				width: 500px;
				height: 500px;
				background-color: skyblue;
				position: relative;
			}
			.in{
				width: 100px;
				height: 100px;
				background-color: salmon;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
			}
		</style>
	</head>
	<body>
		<div class="out">
			<div class="in"></div>
		</div>
	</body>
</html>

4、子绝父相—用法3

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.out{
				width: 500px;
				height: 500px;
				background-color: skyblue;
				position: relative;
			}
			.in{
				width: 100px;
				height: 100px;
				background-color: salmon;
			    position: absolute;
			    top: 0;
			    bottom: 0;
			    left: 0;
			    right: 0;
			    margin: auto;
			}
			
		</style>
	</head>
	<body>
		<div class="out">
			<div class="in"></div>
		</div>
	</body>
</html>

5、子元素为position: relative （position: relative的元素是相对自身原本的位置进行偏移，并且保留它原本的位置）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.out{
				width: 500px;
				height: 500px;
				background-color: skyblue;
			}
			.in{
				width: 100px;
				height: 100px;
				background-color: salmon;
				position: relative;
				top: 50%;
				transform: translateY(-50%);
			}
		</style>
	</head>
	<body>
		<div class="out">
			<div class="in"></div>
		</div>
	</body>
</html>