水平垂直居中的方式

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;

相关推荐
穷鱼子酱几秒前
ElSelect二次封装组件-实现分页(下拉加载、缓存)、回显
前端
科科睡不着1 分钟前
拆解iOS实况照片📷 - 附React web实现
前端
前端老兵AI2 分钟前
Electron 桌面应用开发入门:前端工程师的跨平台利器
前端·electron
胖子不胖3 分钟前
浅析cubic-bezier
前端
reasonsummer8 分钟前
【办公类-133-02】20260319_学区化展示PPT_02_python(图片合并文件夹、提取同名图片归类文件夹、图片编号、图片GIF)
前端·数据库·powerpoint
胡耀超23 分钟前
Web Crawling 网络爬虫全景:技术体系、反爬对抗与全链路成本分析
前端·爬虫·python·网络爬虫·数据采集·逆向工程·反爬虫
阿明的小蝴蝶27 分钟前
记一次Gradle环境的编译问题与解决
android·前端·gradle
Ruihong29 分钟前
【VuReact】轻松实现 Vue 到 React 路由适配
前端·react.js
山_雨30 分钟前
startViewTransition
前端
写代码的【黑咖啡】33 分钟前
Python Web 开发新宠:FastAPI 全面指南
前端·python·fastapi