目录

一、设置文字垂直居中

1、line-height 使文字垂直居中

2、flex布局 使文字垂直居中

3、使用display和vertical-align 使文字垂直居中

二、设置块状元素垂直居中

1、使用绝对定位和transform 使块状元素垂直居中（未知块状元素高度）

2、使用flex布局 使块状元素垂直居中（未知块状元素高度）

3、使用绝对定位和margin 使块状元素垂直居中（已知块状元素高度）

4、使用padding 使块状元素垂直居中（已知元素高度）

5、使用grid布局 使块状元素垂直居中（未知元素高度）

6、使用伪元素:before 使块状元素垂直居中（未知元素高度）

一、设置文字垂直居中

1、line-height 使文字垂直居中

<template>
	<div class="container">
		line-height 使文字垂直居中
	</div>
</template>

<style>
	.container{
		margin: 20px 0px;
		width: 100%;
		height: 100px;
		line-height: 100px;
		background-color: pink;
	}
</style>

2、flex布局 使文字垂直居中

 <template>
 	<div class="container">
 		flex布局 使文字垂直居中
 	</div>
 </template>
 
 <style>
 	.container{
 		margin: 20px 0px;
 		width: 100%;
 		height: 100px;
 		display: flex;
		align-items: center;
		background-color: pink;
 	}
 </style>

3、使用display和vertical-align 使文字垂直居中

3.1 display: table和vertical-align: middle

<template>
	<div class="parent">
		<div class="child">
			<div>使用display和vertical-align 使文字垂直居中</div>
			<div>使用display和vertical-align 使文字垂直居中</div>
		</div>
	</div>
</template>

<style>
	.parent {
		display: table;
		width: 100%;
		height: 100px;
		background-color: skyblue;
	}

	.child {
		display: table-cell;
		vertical-align: middle;
		background-color: pink;
	}
</style>

3.2 display: table-cell和vertical-align: middle 

<template>
	<div class="parent">
		<div class="child">
			<div>使用display和vertical-align 使文字垂直居中</div>
			<div>使用display和vertical-align 使文字垂直居中</div>
		</div>
	</div>
</template>

<style>
	.parent {
		width: 100%;
		height: 100px;
		background-color: skyblue;
		display: table-cell;
		vertical-align: middle;
	}

	.child {
		background-color: pink;
	}
</style>

二、设置块状元素垂直居中

1、使用绝对定位和transform 使块状元素垂直居中（未知块状元素高度）

<template>
	<div class="parent">
		<div class="child">
			<div>
				使用绝对定位和transform 使块状元素垂直居中
			</div>
			<div>
				使用绝对定位和transform 使块状元素垂直居中
			</div>
		</div>
	</div>
</template>

<style>
	.parent {
		width: 100%;
		height: 100vh;
		background-color: skyblue;
	}

	.child {
		width: 100%;
		position: absolute;
		top: 50%;
		transform: translate(0, -50%);
		background-color: pink;
	}
</style>

2、使用flex布局 使块状元素垂直居中（未知块状元素高度）

2.1 display: flex和align-items: center

<template>
	<div class="parent">
		<div class="child">
			<div>
				使用flex布局 使块状元素垂直居中
			</div>
			<div>
				使用flex布局 使块状元素垂直居中
			</div>
		</div>
	</div>
</template>

<style>
	.parent {
		width: 100%;
		height: 100vh;
		display: flex;
		align-items: center;
		background-color: skyblue;
	}

	.child {
		width: 100%;
		background-color: pink;
	}
</style>

2.2 display: flex和align-self: center

<template>
	<div class="parent">
		<div class="child">
			<div>
				使用flex布局 使块状元素垂直居中
			</div>
			<div>
				使用flex布局 使块状元素垂直居中
			</div>
		</div>
	</div>
</template>

<style>
	.parent {
		width: 100%;
		height: 100vh;
		display: flex;
		background-color: skyblue;
	}

	.child {
		align-self: center;
		width: 100%;
		background-color: pink;
	}
</style>

3、使用绝对定位和margin 使块状元素垂直居中（已知块状元素高度）

3.1 绝对定位和margin: auto

<template>
	<div class="parent">
		<div class="child">
			<div>
				使用绝对定位和margin 使块状元素垂直居中
			</div>
			<div>
				使用绝对定位和margin 使块状元素垂直居中
			</div>
		</div>
	</div>
</template>

<style>
	.parent {
		width: 100%;
		height: 100vh;
		background-color: skyblue;
	}

	.child {
		width: 100%;
		height: 100px;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		background-color: pink;
	}
</style>

3.2 绝对定位和margin-top

<template>
	<div class="parent">
		<div class="child">
			<div>
				使用绝对定位和margin 使块状元素垂直居中
			</div>
			<div>
				使用绝对定位和margin 使块状元素垂直居中
			</div>
		</div>
	</div>
</template>

<style>
	.parent {
		width: 100%;
		height: 100vh;
		background-color: skyblue;
		position: relative;
	}

	.child {
		width: 100%;
		height: 100px;
		position: absolute;
		top: 50%;
		margin-top: -50px;/* 高度的一半 */
		background-color: pink;
	}
</style>

4、使用padding 使块状元素垂直居中（已知元素高度）

<template>
	<div class="parent">
		<div class="child">
			<div>使用padding 使块状元素垂直居中</div>
			<div>使用padding 使块状元素垂直居中</div>
		</div>
	</div>
</template>

<style>
	.parent {
		width: 100%;
		height: 300px;
		background-color: skyblue;
		padding: 100px 0;
		box-sizing: border-box;
	}

	.child {
		position: relative;
		width: 100%;
		height: 100px;
		background-color: pink;
	}
</style>

5、使用grid布局 使块状元素垂直居中（未知元素高度）

<template>
	<div class="parent">
		<div class="child">
			<div>
				使用grid布局 使块状元素垂直居中
			</div>
			<div>
				使用grid布局 使块状元素垂直居中
			</div>
		</div>
	</div>
</template>

<style>
	.parent {
		width: 100%;
		height: 100vh;
		display: grid;
		background-color: skyblue;
	}

	.child {
		align-self: center;
		width: 100%;
		background-color: pink;
	}
</style>

6、使用伪元素:before 使块状元素垂直居中（未知元素高度）

<template>
	<div class="parent">
		<div class="child">
			<div>
				使用伪元素:before 使块状元素垂直居中
			</div>
			<div>
				使用伪元素:before 使块状元素垂直居中
			</div>
		</div>
	</div>
</template>

<style>
	.parent {
		width: 100%;
		height: 100px;
		display: block;
		background-color: skyblue;
	}
	
	.parent:before {
		content: '';
		height: 100%;
		display: inline-block;
		vertical-align: middle;
	}

	.child {
		width: 100%;
		display: inline-block;
		vertical-align: middle;
		background-color: pink;
	}
</style>