水平垂直居中的方式

1、margin:0,auto

2、flex弹性布局

父元素设置display:flex;justify-content:center;algin-items:center;

3、父相子绝

父元素设置position:relative;子元素设置position:absolute;left:50%;top:50%;(最后移动自身的50%)transform:translate(-50%,-50%);

4、行内块

display:inline-block;text-algin:center;

5、网格布局

display: grid;place-items:center;

6、table布局

text-algin:center;vertical-algin:middle;

相关推荐
不好听6136 小时前
从一行 JSX 到屏幕像素:前端开发者必须懂的浏览器渲染管线
前端
恒拓高科WorkPlus6 小时前
企业级内网即时通讯建设模型:BeeWorks内网IM四层架构
前端
前端小李子7 小时前
前端环境变量裸奔?我用 EnvShield 给它穿了件防弹衣
前端
youtootech7 小时前
HarmonyOS《柚兔学伴》项目实战25-我的页面、Web 嵌入与项目总结
前端·华为·harmonyos
小林ixn8 小时前
从零到一理解 React 父子组件通信:手写一个 Todo 应用带你彻底搞懂单向数据流
前端·javascript·react.js
醇氧9 小时前
CountDownLatch / CyclicBarrier / Semaphore 面试高频问答清单
前端·面试·职场和发展
qetfw11 小时前
MXU:Tauri 2 + React 的 MaaFramework 跨平台 GUI 源码
前端·python·react.js·前端框架·开源项目·效率工具
甲维斯11 小时前
我要开始吹牛逼了!Kimi K3 “宇宙无敌”!
前端·人工智能
a11177611 小时前
微光小屋-前端养成小游戏 开源项目
前端