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

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

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

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

欢迎指正!

相关推荐
牧羊狼的狼4 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手5 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one5 小时前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
mCell6 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_437830947 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
gnip8 小时前
JavaScript事件流
前端·javascript
CodeCraft Studio8 小时前
国产化Word处理组件Spire.DOC教程:使用 Python 将 Markdown 转换为 HTML 的详细教程
python·html·word·markdown·国产化·spire.doc·文档格式转换
小菜全9 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json
wow_DG9 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js
weixin_456904279 小时前
UserManagement.vue和Profile.vue详细解释
前端·javascript·vue.js