水平垂直居中的方式

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;

相关推荐
砖头拍死你5 分钟前
51单片机如何使用printf打印unsigned long的那些事
java·前端·51单片机
用户15129054522014 分钟前
css —pointer-events属性_css pointer-events
前端
帅夫帅夫15 分钟前
Axios 入门指南:从基础用法到实战技巧
前端
云边散步16 分钟前
《校园生活平台从 0 到 1 的搭建》第四篇:微信授权登录前端
前端·javascript·后端
讨厌吃蛋黄酥18 分钟前
React样式冲突终结者:CSS模块化+Vite全链路实战指南🔥
前端·javascript·react.js
噔噔42820 分钟前
使用webworker优化大文件生成hash的几种方式
前端
Hilaku27 分钟前
原生<dialog>元素:别再自己手写Modal弹窗了!
前端·javascript·html
NeverSettle1105741 小时前
手把手教你用nodejs + vue3 实现大文件上传、秒传、断点续传
前端·面试
用户1512905452201 小时前
crossorigin注解添加了解决不了跨域问题_CORS与@CrossOrigin详解
前端
Silkide1 小时前
前端数据拷贝简史
前端