水平垂直居中的方式

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;

相关推荐
Danny_FD2 分钟前
前端BFC详解:从基础到深入的全面解读
前端
临枫38811 分钟前
网页图像优化:现代格式与响应式技巧
前端
咪库咪库咪22 分钟前
构建交互网站
前端
周星星日记23 分钟前
10.vue3中组件实现原理(上)
前端·vue.js·面试
小华同学ai24 分钟前
6.4K star!轻松搞定专业领域大模型推理,这个知识增强框架绝了!
前端·github
专业抄代码选手26 分钟前
【VUE】在vue中,Watcher与Dep的关系
前端·面试
Lazy_zheng30 分钟前
从 DOM 监听到 Canvas 绘制:一套完整的水印实现方案
前端·javascript·面试
尘寰ya32 分钟前
前端面试-微前端
前端·面试·职场和发展
蘑菇头爱平底锅33 分钟前
数字孪生-DTS-孪创城市-前端实现动态地铁分布线路图
前端·javascript·数据可视化
祯民37 分钟前
AI 时代前端进阶:10分钟入门基于 HuggingFace Transformers 库开源模型私有化部署
前端·aigc