网站首页 > 技术文章 正文
盒子水平垂直居中有几种方式
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 前端基础高频面试题(更新中) 前端经典面试题及答案
你 发表评论:
欢迎- 最近发表
-
- Python常用标准库(pickle序列化和JSON序列化)
- Linux json-c使用_linux解析json数据
- 源码推荐(03.04):微信支付的测试,Json数据解析
- 打开JSON文件的六种方法,总有一种适合你
- springmvc项目中接收Android提交json数据
- 一篇文章让你详细了解何为JSON_json到底是什么
- FlinkSQL处理复杂JSON的思路_flinksql解析json数组
- 超级好用的轻量级JSON处理命令jq_json使用教程
- .NET性能系列文章二:Newtonsoft.Json vs System.Text.Json
- 推荐几个开发必备的JSON工具_推荐几个开发必备的json工具
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (80)
- oracle 工具 (55)
- oracle 内存 (55)
- oracle 导出表 (62)
- oracle约束 (54)
- oracle 中文 (51)
- oracle链接 (54)
- oracle的函数 (58)
- oracle面试 (55)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)