技术栈

水平垂直居中的方式

四季予你662024-09-04 14:07

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;

上一篇:基于SpringBoot的4S店车辆管理系统
下一篇:getLocation:fail, the permission value is offline verifying
相关推荐
用户409932250212
3 小时前
Vue状态管理入门第四章:组合式store和SSR风险
前端·vue.js·后端
Csvn
3 小时前
CSS :has() 选择器实战:没有它之前我们写了多少冗余 JS
前端·css
梨子同志
3 小时前
TypeScript
前端
星栈
3 小时前
LiveView 表单真香,但 changeset 也真会坑人:实时校验、错误展示、前后端校验合一
前端·前端框架·elixir
Slice_cy
3 小时前
JavaScript(ES6)
前端
用户29869853014
3 小时前
在 React 中使用 JavaScript 合并 Excel 文件
前端·javascript·react.js
橘子星
3 小时前
JavaScript this 指向全解实战指南
前端·javascript
何出无名之师
3 小时前
AIDL的一次调用链路追踪之二,如何和驱动打交道
前端
weedsfly
4 小时前
JS垃圾回收:从原理到项目实战,彻底根治内存泄漏
前端·javascript·面试
热门推荐
012026 年 AI 编程工具终极横评:Cursor vs Claude Code vs Copilot vs Windsurf02GitHub 镜像站点03【AI】2026 年具身智能模型和世界模型总结042026年6月AI大模型全景报告:GPT-5.6、Claude Opus 4.8、Gemini 3.5,中美AI三足鼎立谁主沉浮?052026 AI 编程工具终极实战指南:Cursor vs Claude Code vs Copilot,开发者该怎么选?06Claude Code、Codex、Cursor三分天下:2026年AI编程Agent生态全景剖析072026年6月AI行业全景:从百模大战到Agent元年,这30天发生了什么?082026 年 AI 大模型 & AI 编程工具实战全总结09Trae国际版与国内版深度测评:AI原生IDE的双生花10AI科技热点日报 | 2026年07月01日