目录
一、设置文字垂直居中
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>