垂直居中是布局中十分常见的效果之一，为实现良好的兼容性，PC端实现垂直居中的方法一般是通过绝对定位，table-cell，负边距等方法。有了css3，针对移动端的垂直居中就更加多样化。

方法1：table-cell

<div class="box box1"><span>垂直居中</span>
</div>.box1{display: table-cell;vertical-align: middle;text-align: center;
}

方法2：display:flex

.box2{display: flex;justify-content:center;align-items:center;
}

方法3：绝对定位和负边距

.box3{position:relative;}
.box3 span{position: absolute;width:100px;height: 50px;top:50%;left:50%;margin-left:-50px;margin-top:-25px;text-align: center;
}

方法4：绝对定位和0

.box4 span{width: 50%; height: 50%; background: #000;overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
}

这种方法跟上面的有些类似，但是这里是通过margin:auto和top,left,right,bottom都设置为0实现居中，很神奇。
不过这里得确定内部元素的高度，可以用百分比，比较适合移动端。

方法5：translate

.box6 span{position: absolute;top:50%;left:50%;width:100%;transform:translate(-50%,-50%);text-align: center;
}

这实际上是方法3的变形，移位是通过translate来实现的。

方法6：display:inline-block

.box7{text-align:center;font-size:0;
}
.box7 span{vertical-align:middle;display:inline-block;font-size:16px;
}
.box7:after{content:'';width:0;height:100%;display:inline-block;vertical-align:middle;
}

这种方法确实巧妙…通过:after来占位。

方法7：display:flex和margin:auto

.box8{display: flex;text-align: center;
}
.box8 span{margin: auto;}

方法8：display:-webkit-box

.box9{display: -webkit-box;-webkit-box-pack:center;-webkit-box-align:center;-webkit-box-orient: vertical;    text-align: center
}

方法9：display:-webkit-box

这种方法，在 content 元素外插入一个 div。设置此 div height:50%; margin-bottom:-contentheight;。
content 清除浮动，并显示在中间。

<div class="floater"></div>
<div class="content"> Content here </div>  .floater {float:left; height:50%; margin-bottom:-120px;
}
.content {clear:both; height:240px; position:relative;
}

优点：
适用于所有浏览器
没有足够空间时(例如：窗口缩小) content 不会被截断，滚动条出现

面试硬核干货：纯CSS实现垂直居中，快来收藏吧相关推荐

硬核干货：网易云音乐如何做产品创新
网易云音乐是大家非常熟悉和喜欢的一款产品,作为一个音乐类应用,成功融合进了社交等元素,满足了多样化的用户需求.那么今天产品系就带大家揭秘网易云音乐是怎样做产品的,而揭秘者正是网易云音乐的产品总监沈博文 ...
e站app里站hosts_硬核干货区 | E站的国际站运营知识星球上线啦
朋友们大家好,E站已上线了知识星球内容库和问答圈,以阿里国际站,Wordpress自建站,Google SEO的更新内容为主,用原理技术的视角+全栈运营的思维去加成对店铺的运营和优化,知道为什么要这样 ...
【硬核干货】4500字、10个案例分享几个Python可视化小技巧，助你绘制高质量图表...
大家好,这里是俊欣,又是新的一周,好吧,打工人真的是太苦了一般在Python当中,我们用于绘制图表的模块最基础的可能就是matplotlib了,今天小编分享几个用该模块进行可视化制作的技巧,帮助你绘 ...
硬核干货来了！手把手教你实现热力图！
以下内容转载自腾讯位置服务公众号的文章<硬核干货来了!鹅厂前端工程师手把手教你实现热力图!> 作者:腾讯位置服务链接:https://mp.weixin.qq.com/s/bgS7uFl ...
10W+字C语言硬核总结（二），值得阅读收藏！
0.为什么使用指针假如我们定义了 char a='A' ,当需要使用 'A' 时,除了直接调用变量 a ,还可以定义 char *p=&a ,调用 a 的地址,即指向 a 的指针 p ,变量 ...
硬核干货合集！500+篇Java干货技术文章整理|资源|书单|工具|面试指南|强烈建议打开！
今天给大家推荐一位在阿里做Java的朋友给大家,他是公众号[程序员书单]的作者黄小斜. 他的公众号[程序员书单]这两年来累积了200多篇优质原创文章,独家原创的系列文章有<五分钟学编程>系 ...
mysql long类型_怒肝两个月MySQL源码，我总结出这篇2W字的MySQL协议详解（超硬核干货）！！...
点击上方蓝色"冰河技术",关注并选择"设为星标" 持之以恒,贵在坚持,每天进步一点点! 作者个人研发的在高并发场景下,提供的简单.稳定.可扩展的延迟消息队列框架 ...
硬核干货Java集合详解
目录一.问题是最好的老师二.集合的由来三.数组存在的问题四.数组和集合的区别? 五.集合是什么? 六.集合整体架构图七.集合架构图详解 1.Collection 2.List ArrayLi ...
程序员必须掌握的 CPU 硬核干货！
作者 | cxuan 责编 | maozz 大家都是程序员,大家都是和计算机打交道的程序员,大家都是和计算机中软件硬件打交道的程序员,大家都是和CPU打交道的程序员,所以,不管你是玩儿硬件的还是做软件 ...
纯CSS实现垂直居中的几种方法
垂直居中是布局中十分常见的效果之一,为实现良好的兼容性,PC端实现垂直居中的方法一般是通过绝对定位,table-cell,负边距等方法.有了css3,针对移动端的垂直居中就更加多样化. 方法1:tab ...

面试硬核干货：纯CSS实现垂直居中，快来收藏吧