网站首页 > 技术文章 正文
盒子水平垂直居中有几种方式
1、绝对定位。盒子宽高已知, position: absolute; left: 50%; top: 50%; margin-left:-自身一半宽度; margin-top: -自身一半高度;
2、table-cell布局。父级 display: table-cell; vertical-align: middle; 子级 margin: 0 auto;
3、定位 + transform ; 适用于 子盒子 宽高不定时; (这里是本人常用方法)
position: relative / absolute;
/*top和left偏移各为50%*/
top: 50%;
left: 50%;
/*translate(-50%,-50%) 偏移自身的宽和高的-50%*/
transform: translate(-50%, -50%); 注意这里启动了3D硬件加速哦 会增加耗电量的 (至于何是3D加速 请看浏览器进程与线程篇)
4、flex 布局
父级:
/*flex 布局*/
display: flex;
/*实现垂直居中*/
align-items: center;
/*实现水平居中*/
justify-content: center;
再加一种水平方居中的方式 :margin-left : 50% ; transform: translateX(-50%);
最快捷的数组求最大值
var arr = [ 1,5,1,7,5,9];
Math.max(...arr) // 9
最简单的数组去重写法
[...new Set([2,"12",2,12,1,2,1,6,12,13,6])]
// [2, "12", 12, 1, 6, 13]
CSS实现图文不可复制
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
猜你喜欢
- 2024-10-07 2020Web前端常见面试题及答案,前端面试经常会问什么?
- 2024-10-07 了解这些难度较高的前端面试题,助你顺利完成求职
- 2024-10-07 2021前端面试(一面面试题) 2019前端面试
- 2024-10-07 给在职或者在学习前端的朋友们分享一份面试题
- 2024-10-07 前端基础高频面试题(更新中) 前端经典面试题及答案
你 发表评论:
欢迎- 582℃几个Oracle空值处理函数 oracle处理null值的函数
- 576℃Oracle分析函数之Lag和Lead()使用
- 562℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 561℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 556℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 546℃【数据统计分析】详解Oracle分组函数之CUBE
- 535℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 530℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端react (48)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- 前端懒加载 (49)
- Oracle RAC (73)
- oracle恢复 (76)
- oracle 删除表 (48)
- oracle 用户名 (74)
- oracle 工具 (55)
- oracle 内存 (50)
- oracle 导出表 (57)
- oracle 中文 (51)
- oracle的函数 (57)
- 前端调试 (52)
- 前端登录页面 (48)
本文暂时没有评论,来添加一个吧(●'◡'●)