您现在的位置是:首页 > Javascript
当前栏目
CSS 设置垂直居中
2023-03-31 10:37:41 时间
目录
3、使用display和vertical-align 使文字垂直居中
1、使用绝对定位和transform 使块状元素垂直居中(未知块状元素高度)
2、使用flex布局 使块状元素垂直居中(未知块状元素高度)
3、使用绝对定位和margin 使块状元素垂直居中(已知块状元素高度)
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>
相关文章
- 网站建设涉及到的技术有哪些?
- 深度解析CSS中的单位以及区别
- css列表属性和样式控制
- HTML5(三)——Web 本地存储
- 前端已死?全栈当立?取法于中,仅得其下。
- HTML5(七)——SVG基础入门
- 实现 Vue 的响应式系统
- 学习PM2,从这里开始!
- 关于又拍云免费cdn全网加速服务的长期评测(各种踩坑)
- PM2实时查看Node.js项目的输出日志!
- PM2用Cluster Mode,不用修改代码即可提升Node.js项目性能!
- PM2用环境变量隔离Node.js项目的开发与生产环境!
- PM2用监控模式实时更新Node.js项目!
- 使用 Vue3 编写个管理后台
- PM2用配置文件管理多个Node.js项目!
- PM2让Node.js项目在服务器崩溃重启后,能自启动!
- 在Centos7上将Apache(httpd)切换为Nginx的过程记录
- HTTP 状态码 301 与 302 的区别
- HTTP 协议 Transfer-Encoding
- 一寸宕机一寸血,十万容器十万兵|Win10/Mac系统下基于Kubernetes(k8s)搭建Gunicorn+Flask高可用Web集群