当前位置:网站首页>水平垂直居中 方法 和兼容
水平垂直居中 方法 和兼容
2022-07-07 14:19:00 【星空小梦】
方法
第一种通过绝对定位的方式 absolute + 负margin
首先知道子元素的宽高,给子元素设置top:50%;left:50%,
但绝对定位是基于子元素的左上角,我们所希望的效果是子元素的中心居中显示。。。。借助外边距的负值,负的外边距可以让元素向相反方向定位,
通过指定子元素的外边距为子元素宽度一半的负值,就可以让子元素居中了
**优点:**比较好理解,兼容性好
**缺点:**需要知道子元素的宽高
第二种:也是通过绝对定位的方式 absolute + margin auto
这个是需要将各个方向的距离都设0,再讲margin设为auto;就行
**优点:**兼容性也很好
**缺点:**需要知道子元素的宽高
第三种:absolute + calc(计算)
这种方法top的百分比是基于元素的左上角,那么在减去宽度与高度的一半就好了
calc:任何长度值都可以使用calc()函数进行计算;
calc()函数使用标准的数学运算优先级规则;
它支持 “+”, “-”, “*”, “/” 运算
也可以查看calc教程:https://www.runoob.com/cssref/func-calc.html
**优点:**他的兼容性依赖的是calc的兼容性
**缺点:**同样是需要知道子元素的宽高
第四种:absolute + transform (过渡)
这个方法不需要子元素固定宽高
修复绝对定位的问题,还可以使用css3新增的transform,transform的translate
属性也可以设置百分比,其是相对于自身的宽和高,所以可以将translate设置为-50%,就可以做到居中了
**优点:**代码量少
**缺点:**IE8不支持, 属性需要追加浏览器厂商前缀, 可能干扰其他 transform 效果, 某些情形下会出现文本或元素边界渲染模糊的现象.
第五种:line-height
优点:代码简洁
缺点:只对文本有效,只对单行文本有效,多行文本不可以
第九种:弹性盒子的方式
通过给父元素设置justify-content: center;
align-items: center;就可以了
**优点:**移动端使用灵活自如
**缺点:**pc端需要根据兼容情况来判定
第十种:grid(网格布局)
给父级设display:grid;
给子元素设align-self: center;justify-self: center;
**优点:**代码量少
**缺点:**兼容不如flex,建议用flex
不要知道元素宽高:
缺点: 要知道元素宽高:
边栏推荐
- Eye of depth (VII) -- Elementary Transformation of matrix (attachment: explanation of some mathematical models)
- Imitate the choice of enterprise wechat conference room
- 全网“追杀”钟薛高
- Sysom case analysis: where is the missing memory| Dragon lizard Technology
- 华东师大团队提出,具有DNA调控电路的卷积神经网络的系统分子实现
- 分类模型评价标准(performance measure)
- Three. JS series (1): API structure diagram-1
- 【知识小结】PHP使用svn笔记总结
- [hcsd celebrity live broadcast] teach the interview tips of big companies in person - brief notes
- Bidding announcement: 2022 Yunnan Unicom gbase database maintenance public comparison and selection project (second) comparison and selection announcement
猜你喜欢
2022 the 4th China (Jinan) International Smart elderly care industry exhibition, Shandong old age Expo
Odoo integrated plausible embedded code monitoring platform
[C language] question set of X
Step by step monitoring platform ZABBIX
【Android -- 数据存储】使用 SQLite 存储数据
Plate - forme de surveillance par étapes zabbix
Power of leetcode-231-2
3000 words speak through HTTP cache
Unity3d click events added to 3D objects in the scene
【C 语言】 题集 of Ⅹ
随机推荐
Sysom case analysis: where is the missing memory| Dragon lizard Technology
Notification uses full resolution
prometheus api删除某个指定job的所有数据
Have fun | latest progress of "spacecraft program" activities
"The" "PIP" "entry cannot be recognized as the name of a cmdlet, function, script file, or runnable program."
thinkphp3.2.3中设置路由,优化url
asyncio 概念和用法
logback. XML configure logs of different levels and set color output
MySQL中, 如何查询某一天, 某一月, 某一年的数据
What are compiled languages and interpreted languages?
Laravel constructor and middleware execution order
Pycharm terminal enables virtual environment
Bidding announcement: Panjin people's Hospital Panjin hospital database maintenance project
分步式监控平台zabbix
Laravel service provider instance tutorial - create a service provider test instance
47_ Contour lookup in opencv cv:: findcontours()
Record the migration process of a project
AutoLISP series (1): function function 1
47_Opencv中的轮廓查找 cv::findContours()
Mysql database basic operation DQL basic query