解决CSS垂直居中的几种方法（基于绝对定位，基于视口单位，Flexbox方法）
在CSS中对元素进行水平居中是非常简单的：如果它是一个行内元素，就对它的父元素应用 text-align: center ;如果它是一个块级元素，就对它自身应用 margin: auto。然而如果要对一个元素进行垂直居中，可能光是想想就令人头皮发麻了。
多年以来，垂直居中已经成为了CSS领域的圣杯，它同样也是前端开发圈内广为流传的笑话。原因在于它同时具备以下几条特征：
1）它是极其常见的需求。
2）从理论上来看，它似乎极其简单。
3）在实践中，它往往难如登天，当涉及尺寸不固定的元素时尤其如此。
接下来我们具体说明一下这三个方法的简单使用。
一、代码初始化
我们基于如下这段HTML代码，将id='content'的div元素在id='box'的div张垂直居中。
<body>
<div id="box">
<div id="content">这是要居中的元素</div>
</div>
</body>
基本样式如下：
#box{
margin:;
padding:;
width:500px;
height:500px;
background: #4AC291;
font-size:100%;
position: relative;
}
#content{
background: #655;
color: white;
text-align: center;
line-height: 2em;
}
二、基于绝对定位的解决方法
如果我们想要利用绝对定位的方法进行垂直剧中的话，那么就要求元素具有固定的宽度和高度，如果没有固定的宽度和高度就无法实现，因为需要利用top和left的值，进行定位。
#box{
margin:;
padding:;
width:500px;
height:500px;
background: #4AC291;
font-size:100%;
position: relative; //必须的，因为下面的div要根据这个进行定位
}
#content{
background: #655;
color: white;
text-align: center;
line-height: 2em;
position: absolute; //设置绝对定位
top:50%;
left:50%;
width:12em;
height:2em;
margin-top:-1em; // 2/2=1
margin-left:-6em; // 12/2=6
如上图所示，是固定宽高的样式效果。
这段代码在本质上做了这样几件事情：先把这个元素的左上角放置在视口(或最近的、具有定位属性的祖先元素)的正中心，然后再利用负外边距把它向左、向上移动(移动距离相当于它自身宽高的一半)，从而把元素的正中心放置在视口的正中心。借助强大的 calc() 函数，这段代码还可以省掉两行声明：
#box{
margin:;
padding:;
width:500px;
height:500px;
background: #4AC291;
font-size:100%;
position: relative;
}
#content{
background: #655;
color: white;
text-align: center;
line-height: 2em;
/*position: absolute;
top:50%;
left:50%;
width:12em;
height:2em;
margin-top:-1em;
margin-left:-6em;*/
position: absolute;
width: 12em;
height: 2em;
top: calc(50% - 1em);
left: calc(50% - 6em);
}
这个方法最大的局限在于它要求元素的宽高是固定的。在通常情况下，对那些需要居中的元素来说，其尺寸往往是由其内容来决定的。如果能找到一个属性的百分比值以元素自身的宽高作为解析基准，那我们的难题就迎刃而解了!遗憾的是，对于绝大多数CSS属性(包括 margin)来说，百分比都是以其父元素的尺寸为基准进行解析的。
三、基于视口单位的解决方法
假设我们不想使用绝对定位，仍然可以采用translate()技巧来把这个元素以其自身宽高的一半为距离进行移动;但是在缺少left和top的情况下，如何把这个元素的左上角放置的容器的正中心呢?
我们的第一反应很可能是用margin属性的百分比值来实现，就像这样：
#content {
width: 12em;
margin: 50% auto 0;
transform: translateY(-50%);
}
这段代码产生的效果十分离谱。原因在于margin的百分比值时以父元素的宽度作为解析基准的。没错，即使对于margin-top和margin-bottom来说也是这样!
不过幸运的是，如果只是想把元素相对于视口进行居中，仍然是有希望的。CSS值与单位(第三版)定义了一套新的单位，称为视口相关的长度单位。
1) vw 是与视口宽度相关的。与常人的直觉不符的是，1vw 实际上表示视口宽度的 1%，而不是 100%。
2) 与 vw 类似，1vh 表示视口高度的 1%。
3) 当视口宽度小于高度时，1vmin 等于 1vw，否则等于 1vh。
4) 当视口宽度大于高度时，1vmax 等于 1vw，否则等于 1vh。
五、绝对定位结合translate()方法 (不确定宽高的情况下)
使用绝对定位将top和left设置为50%,再将元素本身使用translate分别沿着x和y轴移动-50%,此方法可以在不知道div宽高的情况下实现垂直居中;
#content {
width: 12em;
position:absoulte;
top:50%;
left:50%;
transform: translateY(-50%,-50%);
}
五、Flexbox方法（本文主要说明的方法）
Flexbox(伸缩盒)是专门针对这类需求所设计的。我们之所以要讨论其他方案，仅仅是因为那些方案在浏览器的支持程度上稍微好一些而已。其实目前现代浏览器对 Flexbox 的支持度已经相当不错了。
我们只需写两行声明即可：先给这个待居中元素的父元素设置 display: flex(在这个例子中是元素)，再给这个元素自身设置我们再熟悉不过的margin: auto。
#box{
display: flex;
min-height:50vh;
margin:;
width:500px;
height:500px;
background: #4AC291;
}
#content{
margin:auto;
background: #655;
color: white;
}
如果浏览器不支持Flexbox，页面渲染结果看起来就跟我们的起点图是一样的了(如果设置了宽度的话)。虽然没有垂直居中效果，但也是完全可以接受的。
Flexbo 的另一个好处在于，它还可以将匿名容器(即没有被标签包裹的文本节点)垂直居中。
解决CSS垂直居中的几种方法（基于绝对定位，基于视口单位，Flexbox方法）的更多相关文章
- CSS垂直居中的8种方法
CSS垂直居中的8种方法 1.通过verticle-align:middle实现CSS垂直居中. 通过vertical-align:middle实现CSS垂直居中是最常使用的方法,但是有一点需要格外注 ...
- 完美实现CSS垂直居中的11种方法
在做前端项目时CSS的水平居中我们经常使用,但有时还会用到CSS垂直居中,对于小白来说这个就有些难度了,下面看一下我是如何实现的 本人前端小白,正在做一个小程序开发的项目,css样式调整搞的头都大了. ...
- CSS 垂直居中的5种实现方法
利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 使用 CSS 实现垂直居中并不容易.有些 ...
- CSS垂直居中的四种方法
写在前面的话 最近在Stack Overflow上看到 一个不错的回答 ,以下是我对其的总结,分享给大家. 垂直居中的四种方法 ①基础的方法 设置父元素的line-height等于height,这种方 ...
- CSS垂直居中的11种实现方式
今天是邓呆呆球衣退役的日子,在这个颇具纪念意义的日子里我写下自己的第一篇博客,还望前辈们多多提携,多多指教! 接下来,就进入正文,来说说关于垂直居中的事.(以下这11种垂直居中的实现方式均为笔者在日常 ...
- 纯CSS垂直居中的四种解决方案
总结了几种解决方法 但也不是说除了我说的就没有其他方法了 第一个.利用flex布局 代码: 效果: 第二个.利用transform 的 translate属性 代码: 效果: 第三个.使用伪类::af ...
- css垂直居中的几种方式
1. 对于可以一行处理的 设置 height:apx; line-height:apx; 2.对于一段文字(会多行显示的) ->2.1如果是可以设置一个固定高度的 ...
- CSS实现垂直居中的5种方法
利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 使用 CSS 实现垂直居中并不容易.有些方法在一些浏览器 ...
- CSS 垂直居中5种方法
利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 使用 CSS 实现垂直居中并不容易.有些方法在一些浏览器 ...
随机推荐
- bzoj 2959: 长跑
Description 某校开展了同学们喜闻乐见的阳光长跑活动.为了能"为祖国健康工作五十年",同学们纷纷离开寝室,离开教室,离开实验室,到操场参加3000米长跑运动.一时间操场上 ...
- ES6 let和const命令（2）
为什么要使用块级作用域 在ES5中只有全局作用域和函数作用域,没有块级作用域,因此带来了这些麻烦 内层变量可能会覆盖外层变量 var tmp = new Date(); console.log(tmp ...
- 7、树莓派编程；gpio编程；led闪烁
本博文仅作本人操作过程的记录,留作备忘.自强不息 QQ12226981 1.树莓派接口对照,一定要找到对应的引脚,不要接错了.我画上箭头. 2.安装 下载地址,https://git.drogon.n ...
- 与apk签名有关的那些概念与命令
一.概念篇 1.消息摘要-Message Digest 消息摘要:在消息数据上,执行一个单向的hash函数,生成一个固定长度的hash值,这个Hash值就是消息摘要,也成为数字指纹. 消息摘要特点: ...
- 一、JavaSE语言概述
1.软件:系统软件 VS 应用软件 2.人与计算交互:使用计算机语言.图形化界面VS命令行. 3.语言的分类:第一代:机器语言 第二代:汇编语言 第三代语言:高级语言(面向过程-面向对象) 4.jav ...
- Python初体验
今天开始所有的工作脚本全都从perl转变到python,开发速度明显降低了不少,相信以后随着熟练度提升会好起来.贴一下今天一个工作代码,由于之前去一家小公司测序时,序列长度竟然都没有达到要求,为了之后 ...
- HTML学习 表格和表单
<table></table> 表格标签 width 宽度 border 边框 cellpadding 内容和单元格之间的 ...
- Mac Sublime text3 如何设置更加漂亮好用？
说明:配置是根据自己的需求搜索了蛮多博客测试总结的. 显示效果 配置信息: command + , [逗号], 右侧配置信息 { "color_scheme": "Pac ...
- RobotFrame连接MySql数据库
RobotFrame连接MySql数据库这类的教程网上并不多,就算有,也是很多坑.小编今天为大家提供一个靠谱的教程,但是具体的包需要大家自己下载.废话不多说,看疗效~~~ 1.pip install ...
- 【Python3之正则re】
一.正则re 1.正则表达式定义 正则就是用一些具有特殊含义的符号组合到一起(称为正则表达式)来描述字符或者字符串的方法.或者说:正则就是用来描述一类事物的规则.(在Python中)它内嵌在Pytho ...