目录
一、设置文字垂直居中
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>
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
评论(0)