巧用translate设置元素垂直水平居中
2024-10-18 18:28:03
之前在做手机项目时,用到很多自定义弹窗,然后要求都垂直水平要居中,最开始的时候想用calc来计算,可是css3 的calc兼容性不是很好,于是后来就借助了js来计算,
今天偶然看到别人的一个方法,瞬间感觉自己做了很多无用功~~
translate,translate,translate,translate。。
简单的css代码就可以实现:
.align{width:300px;
height:300px;
border:5px solid #;
position:absolute;
left:%;
top:%;
-webkit-transform:translate(-%,-%) //这是关键
}
而且经过试验,translate
函数当中使用百分比是以该元素的内容区、补白(padding
)、边框(border
)为标准计算的,这就是说 ,不论我们加何种padding或border都不会影响结果。
同时,在动画方面,translate
来制作的动画比绝对定位的动画更加平滑。
原因在于使用绝对定位的动画效果会受制于利用像素(px)为单位进行位移,而使用 translate
函数的动画则可以不受像素的影响,以更小的单位进行位移。
另外,绝对定位的动画效果完全使用 CPU 进行计算,而使用 translate
函数的动画则是利用 GPU,因此在视觉上使用translate
函数的动画可以有比绝对定位动画有更高的帧数。
最新文章
- C# 词法分析器(五)转换 DFA
- 几种 Java 序列化方案的性能比较
- PHP开发者常犯的MySQL错误
- 三、FreeMarker 模版开发指南 第三章 模版
- Google Play市场考察报告-2
- Vim Gtags插件
- 快速搭建Web服务器软件PHP+Apache+MySQL
- 解决weblogic与系统时间相差8小时的问题
- python时间函数
- 相遇Qt5
- 【.NET进程通信】初探.NET中进程间通信的简单的实现
- OPENSSL简介
- JSON的基本结构和数据交换原理
- Android 开发笔记___DatePicker__日期选择器
- php中const与define的区别
- Codeforces1076D. Edge Deletion(最短路树+bfs)
- 1900型USB接口扫描枪设置虚拟串口模式提升扫描速度
- multi-thread debug
- Spring和SpringBoot比较,解惑区别
- centos 6 和centos 7 系统下vnc配置