垂直居中相关知识总结
我想先问一下你们能想到的实现垂直居中的方法有哪些?
1、line-height方式
2、Table布局
3、Inline-block方式
4、绝对定位之automargin
5、绝对定位之负margin
6、transform
7、额外div
8、Flex居中
我把他们分为了两类,文本的垂直居中和块级垂直居中
文本垂直居中:line-height方式、table布局
块级垂直居中:绝对定位之automargin、绝对定位之负margin、额外div、inline-block方式、transform方式、flex居中
一、line-height方式
说明:
该方式只适用于情况比较简单的单行文本,只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了。这种方法在小元素上非常有用,例如使按钮文本或者单行文本居中。
优缺点分析
优点:适用于所有浏览器 无足够空间时不会被截断;
缺点:只对文本有效(块级元素无效), 多行时,断词比较糟糕;
二、table布局
说明:
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。
在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。
display:table此元素会作为块级表格来显示 类似table标签
display:table-cell 此元素会作为一个表格单元格显示 类似td 和 th标签
原理:
利用表布局特点,vertical-align设置为Middle后,单元格中内容中间与所在行中间对齐。
优缺点分析
优点:支持任意内容的可变高度、支持响应式,相对于line-height而言,可以兼容文字有多行的情况;
缺点:每一个需要垂直居中的元素都会需要加上额外标签(需要table、table-cell两个额外元素)
三、Inline-block
说明:将center元素display设置为inline-block,vertical-align设置为middle,为包含框设置after伪元素,将伪元素display设置为inline-block,vercial-align设置为middle,同时设置height为100%,撑开容器。
原理:为同一行的inline-block元素设置vertical-align:middle,该行内的inline-block元素会按照元素的垂直中心线对齐。
优缺点分析
优点:支持响应式、支持可变高度;
缺点:会加上额外标记;
四、绝对定位之automargin
说明:使用绝对定位要求元素必须设置明确高度。内容超过元素高度时需要设置overflow决定滚动条的出现
resize 属性规定是否可由用户调整元素的尺寸。
注释:如果希望此属性生效,需要设置元素的 overflow 属性,值可以是 auto、hidden 或 scroll。
resize: none|both|horizontal|vertical;
优缺点分析
优点:支持响应式,并且在resize后仍然居中;
缺点:没有显式设置overflow时,内容超过元素高度时会溢出,没有滚动条;
五、绝对定位之负margin
说明:已知元素高度后,使用绝对定位将top设置为50%,mergin-top设置为内容高度的一半(height + padding) / 2;内容超过元素高度时需要设置overflow决定滚动条的出现;top:50%元素上边界位于包含框中点,设置负外边界使得元素垂直中心与包含框中心重合;
优缺点分析
优点:代码量少、适用于所有浏览器、不需要嵌套标签;
缺点:不支持响应式(不能使用百分比、min/max-width);
六、Transform
这是最简单的方法,不近能实现绝对居中同样的效果,也支持联合可变高度方式使用。内容块定义transform: translate(-50%,-50%)必须带上浏览器厂商的前缀,还要加上
top: 50%; left: 50%;
优点:
1. 内容可变高度
2. 代码量少
缺点:
1. IE8不支持
2. 属性需要写浏览器厂商前缀
3. 可能干扰其他transform效果
4. 某些情形下会出现文本或元素边界渲染模糊的现象
七、额外div
说明:在需要居中的元素外插入一个div,设置外div的height为50%,margin-bottom为内部元素的一半(height+padding)/2。内容超过元素高度时需要设置overflow决定滚动条的出现。
优缺点分析
优点:浏览器兼容性好,支持旧版本ie;
缺点:需要额外元素、不支持响应式;
八、Flex居中
转载于:https://www.cnblogs.com/1rui/p/5512212.html
垂直居中相关知识总结相关推荐
- html垂直居中ver,垂直居中相关知识总结
垂直居中相关知识总结 前言 工作中用到了很多关于垂直居中相关的知识之前,在SF上提问了个问题CSS关于垂直居中,大家有没有什么比较好的建议.非常感谢各位前辈对我的帮助,前辈们给的答案都非常多也各式各样 ...
- JS作用域相关知识(#精)
在学习<你不知道的JS>一书中,特将作用域相关知识在此分享一下: #说到作用域,就不得不提到LHS查询和RHS查询: 1)如果查询目的是对变量进行赋值,则使用LHS查询 2)如果查询目的是 ...
- 工业相机参数之帧率相关知识详解
点击上方"小白学视觉",选择加"星标"或"置顶"重磅干货,第一时间送达 工业相机是机器视觉系统的重要组成部分之一,在机器视觉系统中有着非常重 ...
- shell的相关知识(变量、脚本定义)
一.shell的相关知识: 1.对于shell编程语言大体分为:机器语言.汇编语言.高级语言 2.shell变量类型:事先确定数据的存储格式和长度 shell变量分为:字符型.数值型 数值型又分为:整 ...
- 视频压缩算法的相关知识
视频压缩算法的相关知识 MPEG-1 MPEG 视频压缩编码后包括三种元素:I帧(I-frames).P帧(P-frames)和B帧(B-frames).在MPEG编码的过程中,部分视频帧序列压缩成为 ...
- linux 格式化 dvd,linux 服务器分区格式化相关知识 -mount
关于linux 系统mount和mkfs 的相关知识: 使用mount 1)Mount的相关格式:mount [-t 文件类型][-o 选项] devicedir 详解: -t 文件类型,通常默认m ...
- WinForm开发,窗体显示和窗体传值相关知识总结
以前对WinForm窗体显示和窗体间传值了解不是很清楚 最近做了一些WinForm开发,把用到的相关知识整理如下 A.WinForm中窗体显示显示窗体可以有以下2种方法: Form.ShowDialo ...
- js基础--数据类型检测的相关知识
欢迎访问我的个人博客:www.xiaolongwu.cn 前言 最近工作有点忙,好几天都没更新技术博客了. 周末起床打开有道云笔记,发现自己的博客todolist里躺了一堆只有名字的文件. 话不多说, ...
- 转载:关于错排的相关知识
转载:关于错排的相关知识 杭电2048相关知识充电 转自:错排公式 分类: 数论 关于程序2012-06-08 19:07 335人阅读 评论(0) 收藏 举报 n2 错排问题 错排问题 就是一种递推 ...
最新文章
- Android移动开发之【Android实战项目】DAY10-App端耗流量场景问题及减少消耗办法
- celery异步邮件发送系统出现django.core.exceptions.ImproperlyConfigured: Requested setting EMAIL_FROM
- idea测试单元错误_不要单元测试错误
- 设置numpy的随机种子
- 怎样修改MFC中应用程序标题的图标?
- python numpy Quickstart tutorial之set_printoptions
- PingCAP联合创始人兼CTO黄东旭:致力于打造全球最好的分布式数据库
- 【LeetCode】剑指 Offer 35. 复杂链表的复制
- 为什么说 5G 绝对不是伪命题? | 人物志
- vb编写各种趣味小程序_【VB小程序】来测测你的打字速度吧
- kafka自带的zk启动_KafKa 启动
- linux 英汉词典程序shell+postgresql版
- [Linux]Linux man命令的使用方法
- 导出excel文件对空值用“--“占位处理
- 如何用开源软件办一场技术大会?
- 织梦dedecms百度快照劫持注入代码防范与清除
- pr的安装教程/基础使用
- 讲座报名|美团自动配送技术:感知预测与规划控制
- 前端修改input上传的图片大小
- Android 截取指定号码的短信 并且不让系统获取短信通知用户