前端常有"横竖居中"的需求, 固定宽高的还好办遇到宽高不确定的情况, 我向大家推荐下面这个方法原理其实就两点position: absolute; 的百分百参照父元素transform: translate(-50%, -50%); 的百分百参照当前元素position 和 transform 合起来的效果就是把父元素和当前元素的中点对齐, 从而达到居中的效果demo<html><head> <meta http-equiv="Content-Type"
前端常有"横竖居中"的需求, 固定宽高的还好办
遇到宽高不确定的情况, 我向大家推荐下面这个方法
原理其实就两点
- position: absolute; 的百分百参照父元素
- transform: translate(-50%, -50%); 的百分百参照当前元素
position 和 transform 合起来的效果就是把父元素和当前元素的中点对齐, 从而达到居中的效果
demo
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset
最低0.47元/天 解锁文章
232
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
