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

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

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

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

欢迎指正!

相关推荐
ohMyGod_1237 分钟前
React16,17,18,19新特性更新对比
前端·javascript·react.js
@大迁世界9 分钟前
第1章 React组件开发基础
前端·javascript·react.js·前端框架·ecmascript
Hilaku12 分钟前
从一个实战项目,看懂 `new DataTransfer()` 的三大妙用
前端·javascript·jquery
爱分享的程序员16 分钟前
前端面试专栏-算法篇:20. 贪心算法与动态规划入门
前端·javascript·node.js
我想说一句17 分钟前
事件委托与合成事件:前端性能优化的"偷懒"艺术
前端·javascript
爱泡脚的鸡腿19 分钟前
Web第二次笔记
前端·javascript
Dream耀24 分钟前
React合成事件揭秘:高效事件处理的幕后机制
前端·javascript
洋流24 分钟前
0基础进大厂,第12天:ES6语法基础篇
javascript
I'm写代码27 分钟前
el-tree树形结构笔记
javascript·vue.js·笔记
到底起什么网名才能不重名35 分钟前
使用各种CSS美化网页
前端·css·vscode·bootstrap·html