一、设置文字垂直居中

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>