html垂直居中ver,垂直居中相关知识总结
垂直居中相关知识总结
前言
工作中用到了很多关于垂直居中相关的知识之前,在SF上提问了个问题CSS关于垂直居中,大家有没有什么比较好的建议。非常感谢各位前辈对我的帮助,前辈们给的答案都非常多也各式各样,我觉得有必要把大家的回答总结一下。
方法总结
一、绝对定位之automargin
先来看一下绝对定位的概念:
position : absolute;
将被赋予此定位方法的对象从文档流中拖出,使用left,right,top,bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,即还是遵循HTML定位规则的,则依据 body 对象左上角作为参考进行定位。绝对定位对象可层叠,层叠顺序可通过 z-index 属性控制,z-index值为无单位的整数,大的在最上面,可以有负值。
说明:
使用绝对定位要求元素必须设置明确高度。内容超过元素高度时需要设置overflow决定滚动条的出现
样式:
HTML结构
我是绝对定位
我在垂直居中
欧耶
CSS样式
.absolute-center {
position: absolute;
width: 100px;
height: 100px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background: #f0f0f0;
/*IE不支持resize*/
resize: both;
overflow: auto;
}
页面呈现样式
优缺点分析
优点:支持响应式,只有这种方法在resize后仍然居中;
缺点:没有显式设置overflow时,内容超过元素高度时会溢出,没有滚动条;
二、绝对定位之负margin
说明:
已知元素高度后,使用绝对定位将top设置为50%,mergin-top设置为内容高度的一半(height + padding) / 2;内容超过元素高度时需要设置overflow决定滚动条的出现;top:50%元素上边界位于包含框中点,设置负外边界使得元素垂直中心与包含框中心重合;
样式:
CSS样式
.absolute-center {
position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 0;
right: 0;
margin: auto;
margin-top: -50px;
background: #f0f0f0;
}
页面呈现样式
优缺点分析
优点:代码量少、适用于所有浏览器、不需要嵌套标签;
缺点:不支持响应式(不能使用百分比、min/max-width);
三、额外div
说明:
在需要居中的元素外插入一个div,设置外div的height为50%,margin-bottom为内部元素的一半(height+padding)/2。内容超过元素高度时需要设置overflow决定滚动条的出现。
样式:
HTML结构
我是绝对定位
我在垂直居中
欧耶
CSS样式
.outer {
height: 50%;
margin-bottom: -50px;
}
.inner {
margin: auto;
height: 100px;
width: 100px;
background-color: #f0f0f0;
}
页面呈现样式
优缺点分析
优点:浏览器兼容性好,支持旧版本ie;
缺点:需要额外元素、不支持响应式;
四、table布局
说明:
关于display:table-cell应用,张鑫旭前辈写过一篇博文我所知道的几种display:table-cell的应用;我就不详细讲述。
display:table此元素会作为块级表格来显示 类似
table标签
,表格前后带有换行符。
display:table-cell 此元素会作为一个表格单元格显示 类似
td 和 th标签
原理:
利用表布局特点,vertical-align设置为Middle后,单元格中内容中间与所在行中间对齐。
样式:
1.HTML
我是绝对定位
我在垂直居中
欧耶
2.CSS样式
.container{
display: table;
height: 200px;
width: 100px;
background: #f0f0f0;
}
.absolute-center{
/*将cell垂直居中,如果外层div不为table则tablecell必须有高度*/
display: table-cell;
vertical-align: middle;
}
3.页面呈现
优缺点分析
优点:支持任意内容的可变高度、支持响应式;
缺点:每一个需要垂直居中的元素都会需要加上额外标签(需要table、table-cell两个额外元素);
五、line-height方式
说明:
该方式只适用于情况比较简单的单行文本,只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了。这种方法在小元素上非常有用,例如使按钮文本或者单行文本居中。
原理:
如果line-height高度大于font-size,生于高度浏览器会平分到文字上下两端。
样式:
1.HTML
我是line-height
2.CSS样式
.container {
width: 200px;
height: 100px;
line-height: 100px;
background-color:#f0f0f0;
}
3.页面呈现
优缺点分析
优点:适用于所有浏览器 无足够空间时不会被截断;
缺点:只对文本有效(块级元素无效) 多行时,断词比较糟糕;
六、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元素会按照元素的垂直中心线对齐。
样式:
1.HTML
我是inline-block
我在垂直居中
欧耶
2.CSS样式
.outer {
display: block;
}
.outer:after {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.inner {
background-color: #f0f0f0;
display: inline-block;
vertical-align: middle;
}
3.页面呈现
优缺点分析
优点:支持响应式、支持可变高度;
缺点:会加上额外标记;
七、JS编写居中
说明:
与CSS方法的绝对定位相似,不过具体的定位方式是在js中写出,便于维护。
样式:
HTML结构
我是js居中
我在垂直居中
欧耶
CSS样式
#box-out {
width: 200px;
height: 200px;
}
#box {
position: absolute;
background-color: #f0f0f0;
width: 100px;
height: 100px;
}
3.javascript
function boxGao() {
var box = document.getElementById('box');
var outBox = document.getElementById('box-out');
var gao = box.offsetHeight;
var outGao = outBox.offsetHeight;
box.style.top = (outGao - gao) / 2 + 'px';
}
boxGao();
4.页面呈现
八、Flex居中
说明:
真正的垂直居中布局,全都是优点,缺点就是IE支持不佳...我觉得有些时候该放弃就可以放弃ie了 :)。Flex阮一峰老师讲的非常非常非常详细,我就不多做介绍了,贴上阮一峰老师的博客
总结
首先非常感谢回复我问题的各位前辈。
目前寻找了这么八种常用的方法,基本囊括了所有的垂直居中的方法。
提别感谢
html垂直居中ver,垂直居中相关知识总结相关推荐
- 垂直居中相关知识总结
我想先问一下你们能想到的实现垂直居中的方法有哪些? 1.line-height方式 2.Table布局 3.Inline-block方式 4.绝对定位之automargin 5.绝对定位之负margi ...
- php正则匹配实验报告,php正则匹配的相关知识总结
一.php正则简介 PHP中有两套正则匹配规则,一套基于POSIX,一套基于PCRE(英文全称:Perl Compatible Regular Expressions:翻译后就是"perl兼 ...
- 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里躺了一堆只有名字的文件. 话不多说, ...
最新文章
- python之变量操作
- 多分辨率适配常用目录
- matlab解符号方程组,matlab 求解符号方程组
- 点云配准 PointNet + Concat + FC
- ceph——rgw服务启不起来
- before与after的一些应用总结
- 互动整合营销_营销成本日益升高,整合营销到底有多重要
- 轻松了解面试官心理!ElasticSearch写入数据的工作原理是什么? | 技术头条
- 饼图大小调整_这么漂亮的双层饼图,你会做吗?让你工作汇报更出彩!
- IntelJIdea 如何修改控制台字体大小和主题
- mailR:利用R语言发邮件
- 【工控老马】PLC六路抢答器系统设计详解
- 为什么街头篮球总提示服务器维护,我玩街头篮球,但这几天它总是说连接不上服务器怎么回事?...
- rockchip rk3566 调试杂记
- C语言自然数各自出现的次数,2010年计算机等考二级C语言上机考试练习(1)
- layui.laydate默认当前时间时分秒
- 操作系统原理实验(3):操作系统的基石中断与异常
- javamail 读取邮箱邮件并下载附件
- php的left join,Left Join
- 大华监控前端实时预览(DHplayer)官方插件
热门文章
- 介绍一些好的域名空间网站
- 类似于支付宝账单数据的json时间戳排序和并问题
- ElasticSearch 的 from+size、scroll、scroll-scan、sliced scroll-sacn、search after
- 德邦快递 x 华为:总成本下降15%,暴力分拣减少50%,智慧物流再提速!
- 《Spark系列-SparkCore》IDEA运行Spark代码异常 -> Error:scalac: IO error while decoding \Demo2.scala with UTF-8
- ActionContext和ServletActionContext解析
- 运算符总结 - markdown语法绘制的思维导图
- 前端每日一解 - setTimeout的执行顺序
- Laya微信小游戏websocket支持wss本地测试方法及上线解决方案
- java与C语言之间socket通信(java客户端 C服务端)