水平垂直居中的方式

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;

相关推荐
一个很帅的帅哥3 分钟前
JavaScript事件循环
开发语言·前端·javascript
小宁爱Python8 分钟前
Django Web 开发系列(二):视图进阶、快捷函数与请求响应处理
前端·django·sqlite
fox_8 分钟前
深入理解React中的不可变性:原理、价值与实践
前端·react.js
Github项目推荐10 分钟前
你的错误处理一团糟-是时候修复它了-🛠️
前端·后端
Code小翊15 分钟前
C语言bsearch的使用
java·c语言·前端
云枫晖16 分钟前
Webapck系列-初识Webpack
前端·javascript
慧一居士18 分钟前
HTML5 功能介绍,使用场景,对应功能点完整使用示例
前端
海在掘金6112727 分钟前
告别“undefined is not a function”:TS如何让你的函数调用更安心
前端
云中雾丽29 分钟前
Flutter中Stream的各种使用场景和实现方式
前端
CptW32 分钟前
第1篇(Ref):搞定 Vue3 Reactivity 响应式源码
前端·面试