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

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

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

方法一:绝对定位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 {
    /* 不需要设置宽高 */
}

欢迎指正!

相关推荐
Mintopia1 分钟前
🌀曲面细分求交:在无限细节中捕捉交点的浪漫
前端·javascript·计算机图形学
Mintopia4 分钟前
🧙‍♂️用 Three.js 判断一个点是否在圆内 —— 一次圆心和点的对话
前端·javascript·three.js
挽淚28 分钟前
JavaScript 数组详解:从入门到精通
javascript
言兴29 分钟前
教你如何理解useContext加上useReducer
前端·javascript·面试
sunbyte32 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
今禾36 分钟前
一行代码引发的血案:new Array(5) 到底发生了什么?
前端·javascript·算法
南篱40 分钟前
JavaScript 中的 this 关键字:从迷惑到精通
javascript
coding随想1 小时前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript
然我2 小时前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子2 小时前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试