【CSS】垂直水平居中

经常会遇到各种情况下,比如具体不定宽高的元素,但是需要让元素垂直水平居中,这种情况下,有很多种方式,常用写法如下:

flex实现

javascript 复制代码
// 父元素
display: flex;
justify-content: center;
align-items: center;

table实现

javascript 复制代码
// 父元素
display: table-cell;
vertical-align: middle;
text-align: center;

CSS3实现

javascript 复制代码
// 父元素
position: relative; 

// 子元素
position: absolute;
top: 50%; // 将子元素左上角与父元素中心对齐,距离父元素上边缘50%距离
left: 50%; // 将子元素左上角与父元素中心对齐,距离父元素左边缘50%距离
transform: translate(-50%, -50%); 将子元素向左边平移子元素宽度的50%,向上边平移子元素宽度的50%,此时子元素的中心和父元素的中心刚好重合,即实现垂直水平居中
相关推荐
知识分享小能手2 分钟前
Vue3 学习教程,从入门到精通,Vue 3 表单控件绑定详解与案例(7)
前端·javascript·vue.js·学习·前端框架·vue3·anti-design-vue
三天不学习7 分钟前
CSS :root伪类详解:实现动态主题切换的关键所在
前端·css·root·主题换肤·css 伪类
江城开朗的豌豆10 分钟前
Vue图片懒加载:极简方案 vs 兼容全攻略
前端·javascript·vue.js
oil欧哟14 分钟前
🧐 AI 批量检查数千份技术文档,如何实现高效文档纠错?
前端·人工智能·ai编程
江城开朗的豌豆15 分钟前
Vue组件data必须用函数?这个设计暗藏玄机!
前端·javascript·vue.js
前端小巷子23 分钟前
web域名解析
前端·javascript·面试
LaoZhangAI23 分钟前
沉浸式翻译API深度解析:500万用户的翻译神器如何配置[2025完整指南]
前端·后端
然我30 分钟前
链表指针玩不转?从基础到双指针,JS 实战带你破局
前端·数据结构·算法
江城开朗的豌豆30 分钟前
组件封装实战:如何设计灵活又好用的前端组件?
前端·javascript·vue.js
EndingCoder38 分钟前
算法与前端的可访问性
前端·算法·递归·树形结构