【CSS】垂直水平居中

经常会遇到各种情况下,比如具体不定宽高的元素,但是需要让元素垂直水平居中,这种情况下,有很多种方式,常用写法如下:

flex实现

javascript 复制代码
// 父元素
display: flex;
justify-content: center;
align-items: center;

table实现

javascript 复制代码
// 父元素
display: table-cell;
vertical-align: middle;
text-align: center;

CSS3实现

javascript 复制代码
// 父元素
position: relative; 

// 子元素
position: absolute;
top: 50%; // 将子元素左上角与父元素中心对齐,距离父元素上边缘50%距离
left: 50%; // 将子元素左上角与父元素中心对齐,距离父元素左边缘50%距离
transform: translate(-50%, -50%); 将子元素向左边平移子元素宽度的50%,向上边平移子元素宽度的50%,此时子元素的中心和父元素的中心刚好重合,即实现垂直水平居中
相关推荐
吃饺子不吃馅10 分钟前
为什么SnapDOM 比 html2canvas截图要快?
前端·javascript·面试
这里有鱼汤35 分钟前
miniQMT下载历史行情数据太慢怎么办?一招提速10倍!
前端·python
用户21411832636021 小时前
dify案例分享-免费玩转 AI 绘图!Dify 整合 Qwen-Image,文生图 图生图一步到位
前端
IT_陈寒1 小时前
Redis 性能翻倍的 7 个冷门技巧,第 5 个大多数人都不知道!
前端·人工智能·后端
mCell8 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip8 小时前
Node.js 子进程:child_process
前端·javascript
excel11 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel12 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼14 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping14 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript