[知识点滴]HTML5元素垂直居中那些事?
###一 摘要
让一个元素水平居中对于CSS来说非常简单:如果是一个内联元素,我们可以在他的父元素上设置text-align:center;;如果是一个块元素,我们可以使用margin:auto;。然而,只要一想到让一个元素垂直居中,让人死的心都有了。
多年来,垂直居中已成为CSS的不朽神话,也是前端专业人士群体中的一个内部笑话。原因是:
- 经常需要使用
- 理论上看上去非常简单
- 过去实战中要实现是极其困难,特别是元素大小固定时
下面我们来看一下,垂直居中的几种方案:
####1.绝对定位解决方案
####2.视窗单位的解决方案
####3.Flexbox的解决方案
一一给打家演示一下
###示例代码
h1,p{width:200px;height:100px;
}
h1{background: #f3d91f;
}
p{background:#4cf3ed;
}<div><h1>this is H1 mark!</h1><p>Center me, please!</p>
</div>
####正常没有居中的情况
###1.绝对定位解决方案
最早实现垂直居中的技术是元素需要一个固定的宽度和高度:
###代码
####方式一
div{position: absolute;top: 50%;left: 50%;margin-top: -3em; /* 6/2 = 3 */margin-left: -9em; /* 18/2 = 9 */width: 18em;height: 6em;
}
####方式二
div{position: absolute;top: calc(50% - 3em);left: calc(50% - 9em);width: 18em;height: 6em;
}
显然,这种方法最大的问题是,元素需要一个固定的尺寸,而需要垂直居中元素的尺寸常常是需要由它的内容来决定。如果我们有办法使用百分比来控制元素尺寸,我们的问题就解决了。不幸的是,对于大多数CSS属性(包括margin)百分比的值是相对于其父元素的宽度来决定。
####方式三
在CSS中常常可以看到很多解决方案是不可思议。在这个例中,就可以使用CSS3的transform。可以在transform中的translate()使用百分比,让元素移动是相对于自身的宽度和高度,这种方案正是我们需要的。
div{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}
当然,没有哪门技术是完美的,在实际使用中要注意一下以下几个事项:
- 绝对定位通常不是一个很好的选择,因为它对整体的布局影响相当的大。
- 如果垂直居中元素的内容比视窗高度更高的话,它的顶部会被裁剪掉,如下图所示。但是这个问题可以解决,只不过需要使用一些Hack手段。
- 在一些浏览器中,可能会导致元素出现略微的模糊,那是因为元素有可能被放置在半个像素位置上。我们可以通过transform-style:preserve-3d来解决,尽管这是一个Hack手段,不能保证它不会过时。
###2.视窗单位的解决方案
CSS Values and Units Level 3定义了一种新的单位,称为相对视窗(viewport-relative)长度单位。
- vw是相对于视窗的宽度。与你预期刚好相反,1vw相当于视窗宽度的1%,而不是100%
- 与vw相似的是,1vh相当于视窗高度的1%
- 如果视窗的宽度小于高度,1vmin等于1vw,反之,如果视窗宽度大于高度,1vmin等于1vh
- 如果视窗的宽度大于高度,1vmax等于1vw,反之,如果视窗宽度小于高度,1vmax等于1vh
- 在这个示例中,我们需要给margin的值设置vh单位:
###代码
div{width: 18em;padding: 1em 1.5em;margin: 50vh auto 0;transform: translateY(-50%);
}
###3. Flexbox的解决方案
这无疑是最好的解决方案,因Flexbox的出现就是为了解决这样的问题。其他解决方案仍然可用,唯一原因是他们能更好的在浏览器上呈现,不过Flexbox在现代浏览器也得到更好的好支持。
只需要两个样式,在需要垂直居中的父元素上设置display:flex(这个示例中就是)和在垂直居中的元素上设置margin:auto
body {display: flex;min-height: 100vh;margin: 0;
}
div {margin: auto;
}
注意,当使用Flexbox和margin:auto时,元素不仅水平居中,而且也会垂直居中。也注意,我们甚至没有设置宽度(如果我们想要也可以设置),其实指定的宽度相当于max-content。
我们可以通过align-items和justify-content属性使设置固定尺寸的
div {display: flex;align-items: center;justify-content: center;width: 18em;height: 10em;
}
同样也可以得到居中的效果
[知识点滴]HTML5元素垂直居中那些事?相关推荐
- 用 CSS 实现元素垂直居中,有哪些好的方案?
DIV居中的经典方法 1. 实现DIV水平居中 设置DIV的宽高,使用margin设置边距0 auto,CSS自动算出左右边距,使得DIV居中. 1 div{ 2 width: 100px; 3 he ...
- html5语义化标记元素_语义HTML5元素介绍
html5语义化标记元素 Semantic HTML elements are those that clearly describe their meaning in a human- and ma ...
- 基础知识--:before伪元素和:after伪元素
http://book.51cto.com/art/201108/285688.htm 3.7 替换指定位置 大家都知道before和after是前.后的意思.但是奇怪的是,CSS中的:before ...
- html需要顺序阅读吗,前端知识:HTML5所有的标签-按顺序排列 | 前端面试题
虽然HTML5的开发已经开始多年了,但网页设计人员/开发人员开始使用HTML5是在2010年.对于许多网络专业人士而言,这种语言非常熟悉,因为它不是试图从头开始重新编写所有内容,HTML5建立在以前的 ...
- Html5元素及基本语法
Html5元素及基本语法 HTML标签 开始标签(opening tag):开放标签 结束标签(closing tag):闭合标签 元素 定义:HTML元素指的是从开始标签到结束标签的代码(元素以开始 ...
- html5元素拖动 (转载黑桐)
HTML5 元素拖动 1.拖动元素img的相关设置: 设置元素可以拖动属性 draggable="true" 设置元素被拖动时触发的事件 οndragstart="dra ...
- html5.js让IE(包括IE6)支持HTML5元素方法
html5.js让IE(包括IE6)支持HTML5元素方法 微软的最新浏览器IE8及以下IE版本对HTML5标签的支持是有限的,我们可以通过在网页中添加脚本的方式来解决目前IE浏览器对HTML5支持的 ...
- 浮动div 内部元素 垂直居中
浮动div 内部元素 垂直居中 在内部放个div 2,要居中元素放进去 div 2{ height: 50px; line-height: 50px; display: table-cell; ve ...
- 利用CSS让元素垂直居中的两种实现方法
利用CSS让元素垂直居中是个很头疼的问题,这里就介绍两种简单实用的方法 方法一:利用行高(line-height)定位 line-height通常是用于调节一段文字的行与行之间的距离,或者说两行文字之 ...
最新文章
- 比Segway轻便的机器人溜冰鞋
- python等差分解一个数
- 网络推广软件浅谈关键词如何布置才能让优化更事半功倍!
- 【测试】有道云笔记数据导出备份功能体验测试
- 记录一些比较有趣的网站,来给自己的网站设计积累思想
- ASP.NET 获取MSN联系人列表
- 信号量使用例子_用信号量锁定:一个例子
- python 分类 投票_LightGBM——提升机器算法(图解+理论+安装方法+python代码)
- python中的tab补全功能添加
- android开发实现静默安装(fota升级)
- 常用文件格式转换大全: PDF转Word,WORD转PDF转换器,DOCX转DOC转换
- Self-introduction (自我介绍)
- redhat红帽 centos yum管理
- sosoapi初次接触
- oracle数据库自动修复,【案例】Oracle数据库由于存在坏块导致无法启动的恢复过程...
- 14.Vue cli脚手架安装
- 快速加速计算机的方法,电脑慢的快速解决办法 四种方法电脑速度变快10倍
- Linux下数据库表结构导入导出
- inteli211网卡linux驱动,intel(R)I211网卡刷I210简易教程
- AudioES8374音频驱动调试