【八股】未知宽高元素水平垂直居中的三种方法

在笔试/面试中,经常出现的一个问题就是:如何实现元素水平垂直居中?

本文会直接使用代码,介绍未知宽高元素水平垂直居中的三种方法:

方法一:绝对定位absolute

css 复制代码
//绝对定位,将元素的左右位置设置为50%,平移自身高度的50%
//兼容性好、广泛使用
.absolute-center-container {
    position: relative;  /* 父容器设置为相对定位 */
    height: 100%;        /* 父容器高度 */
}
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 不需要设置宽高 */
}

方法二:flex布局

css 复制代码
//设置父级为弹性盒子--简洁但是ie 11以上支持
.flex-container {
    display: flex;
    justify-content: center;   /* 水平居中 */
    align-items: center;       /* 垂直居中 */
    height: 100%;              /* 父容器高度 */
}
.centered {
    /* 不需要设置宽高 */
}

方法三:grid布局

css 复制代码
//设置父级为网格元素--简洁,ie10以上支持
.grid-container {
    display: grid;
    place-items: center;  /* 相当于同时设置 justify-items 和 align-items */
    height: 100%;          /* 父容器高度 */
}
.centered {
    /* 不需要设置宽高 */
}

欢迎指正!

相关推荐
Mintopia2 分钟前
Next.js 单元测试究竟该选 JTest 还是 Vitest?
前端·javascript·next.js
Alice-YUE3 分钟前
【CSS学习笔记3】css特性
前端·css·笔记·html
遂心_5 分钟前
深入浅出 querySelector:现代DOM选择器的终极指南
前端·javascript·react.js
遂心_8 分钟前
DOM元素内容修改全攻略:从innerHTML到现代API的最佳实践
前端·javascript·react.js
睡不着先生9 分钟前
CSS `:has()` 实战指南:让 CSS 拥有“if 逻辑”
css
Aomnitrix10 分钟前
知识管理新范式——cpolar+Wiki.js打造企业级分布式知识库
开发语言·javascript·分布式
森林的尽头是阳光41 分钟前
vue防抖节流,全局定义,使用
前端·javascript·vue.js
YiHanXii43 分钟前
React.memo 小练习题 + 参考答案
前端·javascript·react.js
zero13_小葵司1 小时前
Vue 3 前端工程化规范
前端·javascript·vue.js
Yolanda_20221 小时前
vue-sync修饰符解析以及切换iframe页面进行保存提示功能的思路
前端·javascript·vue.js